Can you import props from another component?


If we import an object or a json, we can import it and send it by the props of a Component. Example:

    import Componente from './componente.js'
    import items from './menu.js'

then in the App class

    render() {
        Componente menu={items}

This I know. But is there a way to export the props from one component to another component?

If I have the same example but I import a new Menu.js component and I want that when I click on one of those menus, in the Component.js component I render something. And the mechanics would be to send a status of Menu.js to Component.js.

asked by Jonathan Ludeña 27.10.2017 в 09:15

1 answer


Responding to your question, if , it is not only possible to send information on both the props and the state of a component parent to its / s son / s but that is the approach React proposes.

The data handling in React is hierarchical and unidirectional (top-down), that is:

  • The state must be known and modified by the top element in common to the child elements. For more info see React docs: Lifting state up

  • The information passes from a parent element to a child element , state is used for data volatile and mutable , while props is data < strong> immutable . The correct flow is for a parent to send his state as prop of his / her children / s, so that by changing the state in the parent, the render() is invoked and affects the props of children. That is, the children modify their behavior and rendering according to the state of the father (stored in their props ) and their own internal state.
  • Example : moving from the parent element to the sheet elements the props color and size

    Image taken from: link

    Mini example:

    I have implemented a mini example to visualize this, which basically consists of a main page and a navigation menu ( very ugly by the way ):

    <Menu /> component:

    • Keep in its props a list of items to show, received from the father
    • Maintains a Boolean showItems in its props
    • Render conditionally the items based on the previous property

    <Page /> component:

    • Maintains in its state whether the page actions are enabled or not
    • Create component <Menu /> indicating its prop showItems for conditional rendering
    • It has a handler function to enable / disable actions, which invokes this.setState() and therefore if there are changes it triggers the render() (React standard behavior)

    class Menu extends React.Component{
      /* renders the items conditionally */
        return (
            <h3> {this.props.title} </h3>
            {this.props.showItems && (<ul> {this.props.items} </ul>)}
        </div>) ;
    class Page extends React.Component{
         this.handleChange = this.handleChange.bind(this);
         // set initial state with enableActions = true  to make the checkbox checked by default
         this.state ={enableActions: true};
          {/* creates <button> for each action item */}
          let actions =>{return <li><button> {item} </button></li> });
              <span>Enable menu actions </span>
               {/* checkbox that changes the state  */}
              <input type="checkbox" checked={this.state.enableActions} onChange ={this.handleChange}/>
               {/* (Parent State -> Child prop) - create <Menu /> passing state "enableActions" as "showItems" property */}
              <Menu title="Navigation bar" items = {actions} showItems= {this.state.enableActions} />
        {/* updates state with the current checked value of the checkbox */}
        this.setState({enableActions :});
    let items = ["Help","Login","About us"];
    ReactDOM.render(<Page actions = {items} />, document.getElementById('root'));
        font-family: Tahoma;
      background: #bcd4e6;
      border: 1px solid #4c8dbd;
      color: #4c8dbd;
      width: 70px;
      background: #0095ff;
      color: white;
       margin: 0;
      margin: 0;
      padding: 0;
      list-style-type: none;
    <script src=""></script>
    <script src=""></script>
    <div id = "root">
    answered by 28.10.2017 / 06:38