Updating Child's State From Parent Component

Let's say that my parent component got two child component : Parent | Child1 | Child2 I'am getting an input from Child2 and I'am passing it to the Parent component (until now, I

Solution 1:

Hope you can get the main idea - create a function in the Parent component that will change the value passed to the Child1. ReactJS: Why is passing the component initial state a prop an anti-pattern?

classParentextendsComponent {
  constructor(props){
    super(props);
    this.state = {
      value: ""
    }
  }
  changeValue(value){
    this.setState({value});
  }
  render(){
    return (
      <div><Child1value={this.state.value}/><Child2changeValue={changeValue}/></div>
    )
  }
}


classChild2extendsComponent {
  constructor(props) {
    super(props);
    this.state={
      input: ""
    }
  }
  handleChange(e){
    var {value} = e.target;
    this.setState({
      input: value
    },() =>this.props.changeValue(value));
  }
  render(){
    return (
      <div><inputvalue={this.state.input}onChange={this.handleChange}/></div>
    )
  }
}



classChild1extendsComponent {

  constructor(props) {
    super(props);
    this.state={value:''}
  }
  componentWillReceiveProps(nextProps) {
    this.setState({value: nextProps.value})
  }


  render(){
    return (
      <div>
          {this.props.value}
      </div>
    )
  }
}

Solution 2:

You can have a function in your child component that updates the state based on the value sent from the parent component. And you can access a function of the child component form the parent component using refs

Example

Parent:

classParentextendsReact.Component {
     funcUpdateChild1 = () => {
          this.child1.updateState('value here');
     }
     render() {
          return (
              <Child1ref={(ip) => {this.child1 = ip}} /><Child2ref={(ip) => {this.child2 = ip}} />
         ) 
     }
}

Child1

classChild1extendsReact.Component {
     updateState = (value) => {
         //use the value to set state here
     }
     render() {
          return (
              //child1 contents here
         ) 
     }
}

Solution 3:

**Component parent **

import React from 'react';
    import MM from './modall';
    classAppextendsReact.Component{
        constructor() {
            super();
            this.state = {
                naslov:'',
                telo:''
            };
            this.setStateHandler = this.setStateHandler.bind(this);
            this.postaviStanje = this.postaviStanje.bind(this);
            this.Stanje = this.Stanje.bind(this);
        }
        setStateHandler() {
            this.setState({ naslov: "Naslov Prvi u Modalu", telo:"Novo Prvo telo modala"});

        };
        postaviStanje(){
          this.setState({naslov: " Novi drugi u Modalu", telo:"Novo drugo  telo modala"});
        };
        Stanje(){
          this.setState({naslov: " Novi treci u Modalu", telo:"Novo trece  telo modala"});

        };
        render() {
            return (
                <div>
                    <button onClick = {this.setStateHandler} data-toggle="modal"data-target="#modal">SET STATE</button>
                    <button onClick = {this.postaviStanje} data-toggle="modal"data-target="#modal">SET STATE2</button>
                    <button onClick = {this.Stanje} data-toggle="modal"data-target="#modal">SET STATE3</button>
                    <MM telo={this.state.telo} naslov={this.state.naslov} />)

                </div>
            );
        }
    }
    export default App;

Compnent child

/**
     * Created by trika on 31-Jan-18.
     */importReact,{Component} from'react';

    classModalextendsComponent{
        constructor(props) {
            super(props);
            this.state = {
                naslov:this.props.naslov,
                telo: this.props.telo
            };
        }

        render(){

            return(
                <divclassName="modal"id="modal"role="dialog"><divclassName="modal-dialog"role="document"><divclassName="modal-content"><divclassName="modal-header"><h1className="modal-title"><strong>{this.props.naslov}</strong></h1><buttontype="button"className="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">&times;</span></button></div><divclassName="modal-body"><p>Modal body text goes here.</p><h2><strong>{this.props.telo}</strong></h2></div><divclassName="modal-footer"><buttontype="button"className="btn btn-primary">Save changes</button><buttontype="button"className="btn btn-secondary"data-dismiss="modal">Close</button></div></div></div></div>
            );
        }
    }

    exportdefaultModal;