CODEWITHSUNDEEP
javascriptreactjs
cocoa
cocoa

Reputation: 3921

Access props of react component in separate file

I have two react components that have to stay in separate files but need to share a property. One component will change the this.props.color and the other component needs to know what that new color is. I know you can import the actual component but I don't know how to access the properties from that component. Here's a very simple example of my app (I'm using ES6)

component1.js

import React, {Component, PropTypes} from 'react';

export default class FirstComponent extends Component {
  static propTypes = {
    color: PropTypes.string
  }
  handleClick () {
    //change color here
  }
  render () {
    var styles = {
      backgroundColor: this.props.color
    };
    return <div id="one" style={styles} onclick={this.handleClick}></div>;
  }
}

component2.js

import React, {Component} from 'react';
import FirstComponent from './component1.js';

export default class SecondComponent extends Component {
  /*...*/
  render () {
    console.log(FirstComponent); //??
    return <div id="two"></div>;
  }
}

parent1.js

import React, {Component} from 'react';
import FirstComponent from './component1.js';

export default class FirstComponentParent extends Component {
  color = 'rgb(255, 0, 0)';
  return React.createElement(FirstComponent, {color: this.color});
}

parent2.js

import React, {Component} from 'react';
import SecondComponent from './component2.js';

export default class SecondComponentParent extends Component {
  return React.createElement(SecondComponent);
}

Upvotes: 3

Views: 9383

Answers (1)

J. Mark Stevens
J. Mark Stevens

Reputation: 4945

You use a common parent component and pass the color as a prop to the second component and pass a method updating the color as a prop to the first component. 

import React, {Component, PropTypes} from 'react';

export default class FirstComponent extends Component {
  constructor() {
    super();
    this.state = {color: 'black'};
  }
  handleClick () {
    //change color here
    this.props.changeColor(newColor);
  }
  render () {
    var styles = {
      backgroundColor: this.state.color
    };
    return <div id="one" style={styles} onclick={this.handleClick}></div>;
  }
}

import React, {Component, PropTypes} from 'react';

export default class SecondComponent extends Component {
  render () {
    var styles = {
      backgroundColor: this.props.color
    };
    return <div id="one" style={styles}></div>;
  }
}

import React, {Component, PropTypes} from 'react';
import FirstComponent from './first';
import SecondComponent from './second';

export default class ParentComponent extends Component {
  constructor() {
    super();
    this.state = {firstColor: 'black'};
  }
  changeColor = (newColor) => {
    this.setState({firstColor: newColor});
  }
  render () {
    return (
      <div>
        <FirstComponent changeColor={this.changeColor}/>
        <SecondComponent color={this.state.firstColor}/>
      </div>;
    )
  }
}

Upvotes: 1

Related Questions