React Share variables between components

Question

I have three Components. App is the Parent component. Tools and DrawingBoard are child Components. I want to transfer Data between the Tools and DrawingBoard Component.

export default class App extends  Component{
  getFormData(name, value){
   //empty so far
}
 render(){
   return(
    <div className="main-container">
        <DrawingBoard  styledata={???} />
        <Tools  data={this.getFormData.bind(this)}/>
   </div>
  );
}

I pass the function getFormData as a property to Tools to get its data. Now I want to pass name and value, preferably as an associative array or object with arr["name"] = value as a property to DrawingBoard. How can I do that?

Oleksandr T. · Accepted Answer · 2016-05-14 18:52:38Z

4

You can use state in App component which you can change it inside Tools and new state pass to DrawingBoard,

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      styledata: {}
    };
  }

  getFormData(name, value) {
    this.setState({
      styledata: { [name]: value }
    })
  }

  render() {
    return <div className="main-container">
      <DrawingBoard styledata={ this.state.styledata } />
      <Tools data={ this.getFormData.bind(this) } />
    </div>
  }
}

class Tools extends React.Component {
  getData() {
    // Load data
    // 
    this.props.data('color', 'red');
  }

  render() {
    return <div>
      <button onClick={ this.getData.bind(this) }>Change Data</button>
    </div>
  }
}

class DrawingBoard extends React.Component {
  render() {
    return <div>
      <h1 style={ this.props.styledata }>DrawingBoard</h1>
    </div>
  }
}

Example

answered May 14, 2016 at 18:52

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Achintha Isuru Over a year ago

using this.getData.bind(this) directly reduce the performance of the app, as it re-render the component, therefore use 'this.getData = this,getData.bind(this)' in the constructor. For more information visit ' youtube.com/… '

Collectives™ on Stack Overflow

React Share variables between components

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related