Props are immutable and are controlled by the parent component. In React, every class component has a state property used for self-managed and mutable data. Like props, state is just a plain JavaScript object.
To set the default starting state, you can declare the state as a class field, thanks to Webpack, or set it in the constructor instead:
class Parent extends React.Component {
state = {
greet: 'Props and State',
};
onUpdate = () => {
console.log('Child triggered callback');
};
render() {
return (
<div>
<Child text={this.state.greet} onUpdate={this.onUpdate} />
</div>
);
}
}
The parent component sets a greet key on the initialized state object with an initial value. Then the state object is used in the render method to pass down the text as a prop to the child component.