How can I add a child to a React ponent. this.props.children seems to be read-only so can't mutate it directly.

Let's say I have

var myComponent = <MyComponent someProp="foo"><h1>heading</h1><h2>another heading</h2></MyComponent>

and I'd like to add <p>some text</p> as a third child to it.

I'd like to acplish this:

var newChild = <p>some text</p>
myComponent.props.children.add(newChild)

so that the result would be

<MyComponent someProp="foo"><h1>heading</h1><h2>another heading</h2><p>some text</p></MyComponent>

(obviously the add function doesn't exist but the question is what to do instead)

How can I add a child to a React ponent. this.props.children seems to be read-only so can't mutate it directly.

Let's say I have

var myComponent = <MyComponent someProp="foo"><h1>heading</h1><h2>another heading</h2></MyComponent>

and I'd like to add <p>some text</p> as a third child to it.

I'd like to acplish this:

var newChild = <p>some text</p>
myComponent.props.children.add(newChild)

so that the result would be

<MyComponent someProp="foo"><h1>heading</h1><h2>another heading</h2><p>some text</p></MyComponent>

(obviously the add function doesn't exist but the question is what to do instead)

• javascript
• reactjs

• 1 You should never modify the contents of a ponent's render from outside the ponent. You should either just change the children in a parent ponent's render function, or have MyComponent render children based on props, as in <MyComponent rows={ [{ heading: 'heading' }] } etc – Andy Ray Commented Dec 7, 2016 at 22:07
• when do u want to add the third element? – Sagi_Avinash_Varma Commented Dec 7, 2016 at 22:10

2 Answers 2

The children prop represents the content inserted between the tags of a JSX element (see docs), and is not supposed to be modified directly. In fact, attempting to perform modifications on any content inside of this.props is usually unthinkable.

To address your particular problem, you seem to wish to define what children are added to a ponent, as in something like this:

// parent ponent's render method
render() {
  const elements = ...; //build up an array of elements
  return (<MyComponent someProp="foo">
    <h1>heading</h1>
    <h2>another heading</h2>
    {elements}
  </MyComponent>)
}

The root element of type MyComponent would then know how to use these children for a proper render, which are made available in this.props.children. If this ponent needs to actively trigger the inclusion of text, then you could either include a text change callback as a prop to MyComponent, or just use ponent state (thus refraining from using the children for that paragraph at all).

Keep a state that has all the children to the ponent.

Try adding to the state instead of the props, and in render write:

render() {
return ({<div>this.state.children.map((child) => {return <child as jsx>;}}</div>);