dynamically render button from stateless functional component

Question

I have stateless functional child component that looks like this

const MultiChoiceQuestion = props => (
  <div>
    <h1>{props.questionText}</h1>
    <button>{props.choice}</button>
  </div>
)

I would like this component to dynamically generate buttons based on the array in my parent component.

class CNA extends Component {
  constructor(props) {
    super(props)
    this.state = {

    }

    const choiceArray = ['1', '2', '3']
    choiceArray.map(questionChoice => {
      return questionChoice
    })

  }
  render() {
    return (
      <React.Fragment>
        <p>This is the cna survey</p>
      <MultiChoiceQuestion questionText="Hello" choice={this.questionChoice} />
      </React.Fragment>
    )
  }

So basically, because there are 3 items in my choicesArray, I would like 3 buttons generated. Any ideas?

Answer 1

In the constructor, you should define choiceArray as an instance property, not just a var within the function: this.choiceArray = ['1', '2', '3']

Then move the map() to within the JSX of the render function:

{this.choiceArray.map(questionChoice => <MultiChoiceQuestion questionText="Hello" choice={questionChoice} /> ) }

Answer 2

You can do something like this:

getQuestions = () => {
    return this.choiceArray.map(questionChoice => {
      return <MultiChoiceQuestion questionText="Hello" choice={questionChoice} />
    })
}

render() {
    return (
      <React.Fragment>
        <p>This is the cna survey</p>
      {this.getQuestions()}
      </React.Fragment>
    )
  }

Answer 3

class CNA extends Component {
  constructor(props) {
    super(props)
    this.state = {
      choiceArray: ['1', '2', '3']
    }
  }
  render() {
    return (
      <React.Fragment>
        <p>This is the cna survey</p>
        { this.state.choiceArray.map((choice) => {
            return <MultiChoiceQuestion questionText="hello" choice={choice} />
          })
        }
      </React.Fragment>
    )
  }

Answer 4

This is how you can create dynamic button based on array and select particular button on click.

class CNA extends Component {
  constructor(props) {
    super(props)
    this.state = {
      choiceArray: ['1', '2', '3']
    }
  }
  handleSelected=selected=>{
    console.log(selected)
  }
  render() {
    return (
      <React.Fragment>
        <p>This is the cna survey</p>
        {this.state.choiceArray.map(choice=>
          <MultiChoiceQuestion questionText="Hello"
           choice={choice} handleClick={()=>this.handleSelected(choice)}/> 
        )}
      </React.Fragment>
    )
  }
}
const MultiChoiceQuestion = props => (
  <div style={{display:'flex'}}>
    <h1>{props.questionText}</h1>
    <button onClick={props.handleClick}>{props.choice}</button>
  </div>
)