How to update the props of a rendered react component from App.js?

Question

I have a React component MoviesGallery.js with the following configuration:

class MoviesGallery extends Component {

    constructor(props) {
        super(props)
        this.state = { currentImage: 0 };
        this.closeLightbox = this.closeLightbox.bind(this);
        this.openLightbox = this.openLightbox.bind(this);
        this.gotoNext = this.gotoNext.bind(this);
        this.gotoPrevious = this.gotoPrevious.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({movies_genre: nextProps.movies_genre})
    }

I have rendered the component in my main App.js file like so:

class App extends Component {

  render() {
    return (
      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
          <RaisedButton primary={true} label="Query" className="header_buttons"/>
          <RaisedButton secondary={true} label="Reset" className="header_buttons"/>
        </header>
        <MoviesGallery/>
      </div>
      </MuiThemeProvider>
    );
  }
}

I want to update the props of my MoviesGallery component without recreating the component. Since I already added the componentWillReceiveProps() to MoviesGallery component, how can I make it so when 'Query' button is clicked, it will pass new props to the already rendered MoviesGallery and componentWillReceiveProps() should cause it to re-render since the state will change.

Just confused about the function that will change the props themselves on-click of the rendered MoviesGallery component.

Thanks in advance!

Answer 1

you can use the 'state' for your MovieGallery.js props because the state is an object that changes and you must your code like below :

class App extends Component {
  state = {
    query : null
  }
  myFunction(query){
     this.setState({query});
  }
  render() {
    return (
      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
          <RaisedButton primary={true} label="Query" className="header_buttons" onClick={this.myFunction = this.myfunction.bind(this)}/>
          <RaisedButton secondary={true} label="Reset" className="header_buttons"/>
        </header>
        <MoviesGallery newProps = {this.state.query}/>
      </div>
      </MuiThemeProvider>
    );
  }
}

i hope it helps

Answer 2

When a parent pass a new (value) prop to the child, the child component will call the render method automatically. There is no need to set a local state inside the child component to "store" the new prop.

Here is a small example of a Counter that receives a count prop and just displays it, while the parent App in this case will change the value in its state and pass the new value to Counter :

 class Counter extends React.Component { render() { const { count } = this.props; return ( <div>{count}</div> ); } } class App extends React.Component { constructor(props) { super(props); this.state = { count: 0 } } onClick = () => { this.setState({ count: this.state.count + 1 }); } render() { const { count } = this.state; return ( <div> <Counter count={count} /> <button onClick={this.onClick}>Add to counter</button> </div>); } } ReactDOM.render(<App />, document.getElementById('root')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>