Update a react components state from its parent - reactjs

Question

Is it ok to update React components state by calling its member function from its parent. Something like:
class SomeComp extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
updateState(data) {
this.setState({ data: data })
}
render() {
return (<div>this.state.data</div>);
}
}

Answer 1

Is it ok to update React components state by calling its member function from controller?
Yes, you can do that but it's unnecessary. Usually you want to update the child state by passing down props from the parent. I've made some examples of how you can update a Child from the Parent below.
Example 1:
In this example, you don't need any state for the Child. The Parent manages the state and passes down any changes to the Child via props. This is the recommended approach.
Parent
class Parent extends React.Component {
constructor() {
super();
this.state = {text: "hello"};
}
render() {
return <Child data={this.state.text} />;
}
}
Child
class Child extends React.Component {
render() {
return <span>{this.props.data}</span>;
}
}
Example 2:
In this example, we use two states, one for each component. This is unnecessary for this implementation, but you can still do it. When the Child mounts, we set the state to whatever the data prop is set to. We update the state whenever the Child component receives props with componentWillReceiveProps().
Parent
class Parent extends React.Component {
constructor() {
super();
this.state = {text: "hello"};
}
render() {
return <Child data={this.state.text} />;
}
}
Child
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {childText: props.data};
}
componentWillReceiveProps(nextProps) {
if(nextProps.data !== this.props.data)
this.setState({childText: data});
}
render() {
return <span>{this.state.childText}</span>;
}
}
Example 3:
In this example, the Child component is given a ref which we then can use to trigger a Child function from Parent. Usually this is done in the reverse order (triggering a function from Child to Parent), but you can still do this if you want. This is the more manual approach and similar to what you asked.
Parent
class Parent extends React.Component {
constructor() {
super();
this.state = {text: "hello"};
}
triggerUpdate = () => {
this.child.component.update(this.state.text);
}
render() {
return <Child ref={(el) => this.child = el} data={this.state.text} />;
}
}
Child
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {childText: props.data};
}
update = (text) => {
this.state({childText: text});
}
render() {
return <span>{this.state.childText}</span>;
}
}