I have a child ponent in a Layout that I want to pass a props value too. But I don't know how. In the class below the layoutFileDataRequest() receives a string variable from a child ponent on a click event. There is a need to send that value to one of the this.props.children ponents so it can update.

How do I do this? In the code below React.cloneElement(child, { does not change it always stays the same which means I can't update the child prop.

  export default class Layout extends React.Component {
    constructor(props) {
      super(props)

      this.layoutFileDataRequest = this.layoutFileDataRequest.bind(this);
      this.state = {
        newData: '',
        returnData: 'test',

      }
    }

    /**
     *  Received request from server add it to 
     *  react ponent so that it can be rendered
     */
    layoutFileDataRequest(data) {
      this.setState({ returnData:data })
    }


    renderChildren() {
      return React.Children.map(this.props.children, child => {
        console.log(this.state.returnData); 
          return React.cloneElement(child, {
            data: this.state.returnData
          })
      });
    } 

    /**
     *  Render request
     * 
     * 
     */
    render() {
      const { location } = this.props;
      const title = this.state.newData;
      return (
        <div id="app-container" class={title}>
          <Nav location={location} />
          <main id="main">
            <h1>{title}</h1>
            <section>
                {this.renderChildren()}
            </section>
          </main>
          <Project layoutFileDataRequest={this.layoutFileDataRequest} />
          <Footer />
        </div>
      );
    }
  }


export default class Project extends React.Component {
  constructor(props) {
    super(props)

    this.projectFileDataRequest = this.projectFileDataRequest.bind(this);

    this.state = {
      newData: [],
    }

  }


  /**
   *  Received request from server add it to 
   *  react ponent so that it can be rendered
   */
  projectFileDataRequest(data) {
    this.props.layoutFileDataRequest(data);
  }


  /**
   *  Received request from server add it to 
   *  react ponent so that it can be rendered
   */
  ponentDidMount() {
    ApiCalls.readSassDirData()
      .then(function (serverData) {
        this.setState({ newData: serverData[0].data })
      }.bind(this));
  }


  /**
   *  Render request
   */
  render() {
    const listOfObjects = this.state.newData;
    return (
      <aside id="project">
        <h2>Files</h2>
        <FileListing listOfObjects={listOfObjects} projectFileDataRequest={this.projectFileDataRequest} />,
       </aside>
    );
  }
}

I have a child ponent in a Layout that I want to pass a props value too. But I don't know how. In the class below the layoutFileDataRequest() receives a string variable from a child ponent on a click event. There is a need to send that value to one of the this.props.children ponents so it can update.

How do I do this? In the code below React.cloneElement(child, { does not change it always stays the same which means I can't update the child prop.

  export default class Layout extends React.Component {
    constructor(props) {
      super(props)

      this.layoutFileDataRequest = this.layoutFileDataRequest.bind(this);
      this.state = {
        newData: '',
        returnData: 'test',

      }
    }

    /**
     *  Received request from server add it to 
     *  react ponent so that it can be rendered
     */
    layoutFileDataRequest(data) {
      this.setState({ returnData:data })
    }


    renderChildren() {
      return React.Children.map(this.props.children, child => {
        console.log(this.state.returnData); 
          return React.cloneElement(child, {
            data: this.state.returnData
          })
      });
    } 

    /**
     *  Render request
     * 
     * 
     */
    render() {
      const { location } = this.props;
      const title = this.state.newData;
      return (
        <div id="app-container" class={title}>
          <Nav location={location} />
          <main id="main">
            <h1>{title}</h1>
            <section>
                {this.renderChildren()}
            </section>
          </main>
          <Project layoutFileDataRequest={this.layoutFileDataRequest} />
          <Footer />
        </div>
      );
    }
  }


export default class Project extends React.Component {
  constructor(props) {
    super(props)

    this.projectFileDataRequest = this.projectFileDataRequest.bind(this);

    this.state = {
      newData: [],
    }

  }


  /**
   *  Received request from server add it to 
   *  react ponent so that it can be rendered
   */
  projectFileDataRequest(data) {
    this.props.layoutFileDataRequest(data);
  }


  /**
   *  Received request from server add it to 
   *  react ponent so that it can be rendered
   */
  ponentDidMount() {
    ApiCalls.readSassDirData()
      .then(function (serverData) {
        this.setState({ newData: serverData[0].data })
      }.bind(this));
  }


  /**
   *  Render request
   */
  render() {
    const listOfObjects = this.state.newData;
    return (
      <aside id="project">
        <h2>Files</h2>
        <FileListing listOfObjects={listOfObjects} projectFileDataRequest={this.projectFileDataRequest} />,
       </aside>
    );
  }
}

• javascript
• reactjs

Share Improve this question Follow edited Apr 28, 2018 at 6:24 purencool asked Apr 28, 2018 at 5:04 purencoolpurencool 42377 silver badges1717 bronze badges 11

• The way you passing props to children ponent looks all good in renderChildren. Your child ponent should be able to access data by this.props.data. Please refer to stackoverflow./questions/32370994/… on passing props to children. Not sure what do you mean ? – Kevin Li Commented Apr 28, 2018 at 5:19
• Thanks in the code above React.cloneElement(child, { does not change it always stays the same – purencool Commented Apr 28, 2018 at 5:51
• Can you share Project code – Liam Commented Apr 28, 2018 at 6:18
• I have just added it above or you can see it here github./purencool/purencool_editor/blob/master/src/js/… – purencool Commented Apr 28, 2018 at 6:26
• 1 So now I'm in ide/FileListing file why you are doing this changeValue = (data) => (e) => { – Liam Commented Apr 28, 2018 at 6:37

 |  Show 6 more ments

3 Answers 3

Sorted by: Reset to default 4 +25

I think the error is in the renderChildren function.

Code

 renderChildren() {
      return React.Children.map(this.props.children, child => {
        console.log(this.state.returnData); 
          return React.cloneElement(child, {
            data: this.state.returnData
          })
      });
    }

New Code

renderChildren(){
    return this.props.children.map(child => 
        React.cloneElement(child, { 
            data: {...this.state.returnData }
        })
    );
}

There's nothing wrong with the actual code, the only thing that i am guessing is happening is that in the <FileListing /> ponent there is not and invocation to the prop (method) projectFileDataRequest passing the update that wants to be transfer it to the <Layout />'s children.

TL;DR... Here is your code working and updating the <Layout />'s children just after receiving a click event in <FileListing />.

https://codesandbox.io/s/5050w0p9kx

I hope it helps you

Your code actually works fine. This is cloneElement's arguments:

React.cloneElement(
  element,
  [props],
  [...children]
)

You are passing data as props to child ponents.

Check this out: stackblitz./edit/react-xhwmd3?file=Layout.js