State:

• It is an updatable structure that is used to contain data or information about the component and can change over time.
• State Can be modified using this.setState. State can be asynchronous
• The component can be directly accessed or modified inside the component.
• It is kept as simple as possible.
• It represents the component’s local state or information.

For Example,

class Test extends React.Component {    
    constructor() {    
        this.state = {      
            id: 1,      
            name: "kaashiv"    
        };  
    }    
    
    render() {    
        return (      
            <div>        
              <p>{this.state.id}</p>        
              <p>{this.state.name}</p>      
            </div>    
        );  
    }
}

Props:

• In UI that components in React are used again and again.
• In the component, we need to change the content inside.
• It is an object which stores the value of attributes of a tag and works similarly to the HTML attributes.
• From one component to other components, It allows the passing of data.
• While inside the component we cannot modify the props, because they are immutable.
• They are used to passing data between React components.

For Example,

class ParentComponent extends Component {    
    render() {    
        return (        
            <ChildComponent name="Second Child" />    
        );  
    }
}

const ChildComponent = (props) => {    
    return <p>{props.name}</p>; 

Difference between State and Props :