React: how to construct children

Question

I get the following error:

Here's my code:

import React from 'react'
import ReactDOM from 'react-dom';

class Container extends React.Component {
    render() {
        const props = this.props.children.map(child => child.props.prop)
        console.log('Props: ', props)
        return <div>{ this.props.children.map(child => child.props.children) }</div>
    }   
}

export class App1 extends React.Component {

    render() {
        return(
            <Container>
                <div prop="1"><p>Child 1</p></div>
                <div prop="2"><p>Child 2</p></div>
                <div prop="3"><p>Child 3</p></div>
            </Container>
        )
    }
}

export class App2 extends React.Component {
    render() {
        const nrs = ["1", "2", "3"]
        return(
            <Container>
                { nrs.map(nr => <div prop={nr}><p>Child {nr}</p></div>) }
            </Container>
        )
    }
}

export class App3 extends React.Component {
    render() {
        const nrs = ["2", "3"]
        return(
            <Container>
                <div prop="1"><p>Child 1</p></div>
                { nrs.map(nr => <div prop={nr}><p>Child {nr}</p></div>) }
            </Container>
        )
    }
}

ReactDOM.render(<App3 />, document.getElementById('root'));

App1 ('static' children only) and App2 (generated children only) work fine and seem equivalent. I expected App3 to do the same, but instead I get the error above.

How can I combine a 'static' child and generated children in a Container component?

Answer 1

In your container component, you don't need to destructure and reassign any props. Its appended automatically.

Your container should be like this

class Container extends React.Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}

Click this link for the code in action in codeSandbox.

---

Edit

If you need the container component to change the props of its children, the you cannot map directly, you need to use the React.Children utility.

React.Children.map(this.props.children, (child) => child.props)

Read here for more info

Answer 2

When adding static child and dynamic child together your solution is not working. Try to get all elements to one array if possible,

Following is a one possible way. You can find a much efficient way with respect to your requirement.

render(){
    const nrs = ["2", "3"]
    const staticChild = <div prop="1"><p>Child 1</p></div>
    const elements = nrs.map(nr => <div prop={nr}><p>Child {nr}</p></div>)
    elements.push(staticChild)
        return(
            <Container>                
                { elements }
            </Container>
        )
}

Answer 3

You can use React Hooks from version 16.8 to map your props like this

import React, {useState} from 'react'

export const Item = (props) => {
  const {text} = props
  return (
    <div>
      <h1>{text.heading}</h1>
      <h2>{text.subheading}</h2>
    </div>
  )
}

export default (props) => {
  const [state, setState] = useState({
    items: [
      {
        text: {
          heading: 'Test heading',
          subheading: 'Test subheading'
        }
      }
    ]
  })

  return (
    <div>
      {state.items.map((item, index) => {
        return <Item key={index} {...item} />
      })}
    </div>
  )
}