Adding a list item via a button in React?

Question

Here's the parts of my code that are useful:

class Answers extends Component {

  constructor(props) {
    super(props);
    this.state = {
      answers: Array(4).fill(""),
      correctAnswers: [],
    };
    this.handleUpdate = this.handleUpdate.bind(this);
  }

  // let event = {
  //   index: 1,
  //   value: 'hello'
  // };
  handleUpdate (event) {
    //if ("1" == 1) // true
    //if ("1" === 1) //false 
    var answers = this.state.answers;
    answers[event.index] = event.value;
    this.setState(() => ({
      answers: answers
    }));

    console.log(event);
  }

  render () {
    return (
      <div id="answers">
                Answer Choices<br />
        {this.state.answers.map((value, index) => (
          <Answer value={value} key={index} onUpdate={this.handleUpdate} number={index}/>
        ))}
      </div>
    );
  }
}

class Answer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputText: "",
      answer: props.value,
      correctAnswers: "",
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    this.setState((previousState, props) => ({
      answer: value
    }));
    this.props.onUpdate({
      index: this.props.number,
      value
    });

    //
    // let sample = {
    //   kyle: "toast",
    //   cam: "pine"
    // };

    // sample.kyle
    // sample.cam

  }
  render () {
    return (
      <div>
        <input type="checkbox"/>
        <input type="text" value={this.state.answer} onChange={this.handleChange}/>
      </div>
    )
  }
}


var questionIdx = 0;

class Questions extends Component {
  constructor(props){
    super(props);
    this.state = {
      questions:[]
    }
    this.handleUpdate = this.handleUpdate.bind(this);
  }

  handleUpdate (event) {
    //if ("1" == 1) // true
    //if ("1" === 1) //false 
    var questions = this.state.questions
    questions[event.index] = event.value;
    this.setState(() => ({
      questions: questions
    }));


    console.log(event);
  }

  render () {
    return (
      <div id="questions">
        <ol id="quesitonsList">
          <li id="oneQuestion">
            <Question onUpdate={this.handleUpdate} number={questionIdx}/>
          </li>
        </ol>
      </div>
    );
  }
}

class Question extends Component {
  constructor(props){
    super(props);
    this.state = {
      question: ""
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    this.setState((previousState, props) => ({
      question: value
    }));
    //if (this.prop.questions.indexOf(value) == questionIdx) {
      this.props.onUpdate({
        index: questionIdx,
        value
      });
   // }
  }

  render () {
    return (
      <div id="question">
        Question<br />
        <input type="text" value={this.state.question} onChange={this.handleChange}/>
        <PhotoDropZone />
        <Answers />
      </div>
    );
  }
}

class AddQuestionButton extends Component {

  addQuestion () {

  }

  render () {
    return (
      <div id="addQuestionButton">
        <button id="addQuestionButton" onClick={this.addQuestion}>Add Question</button>
      </div>
    );
  }
}

So what I am having trouble figuring out is how to go about using my addQuestionButton to add
<li id="oneQuestion"> <Question onUpdate={this.handleUpdate} number={questionIdx}/> </li>
to my questionsList <ol></ol> in my Questions class. I'm having a hard time figuring out how to approach this, I'm new to React and JS. I don't need the exact answer per say but a hint in the right direction would help. Thanks!

Answer 1

You could create a function in your Questions that adds a question to your questions state array and pass that down as a prop to your AddQuestionButton component.

Example

class Questions extends React.Component {
  state = {
    questions: ["What is this?"]
  };

  addQuestion = question => {
    this.setState(prevState => ({
      questions: [...prevState.questions, question]
    }));
  };

  render() {
    return (
      <div id="questions">
        <ol id="quesitonsList">
          {this.state.questions.map(question => (
            <li id="oneQuestion"> {question} </li>
          ))}
        </ol>
        <AddQuestionButton onClick={this.addQuestion} />
      </div>
    );
  }
}

class AddQuestionButton extends React.Component {
  addQuestion = () => {
    this.props.onClick(
      Math.random()
        .toString(36)
        .substring(7) + "?"
    );
  };

  render() {
    return (
      <div id="addQuestionButton">
        <button id="addQuestionButton" onClick={this.addQuestion}>
          Add Question
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Questions />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Answer 2

Perhaps it may help you:

const questionsList  = [1, 2, 3, 4, 5];
const listItems = questionsList.map((item, index) =>(
  <li key="{index}">
       <Question onUpdate={this.handleUpdate} number={questionIdx}/>
 </li>
));

ReactDOM.render(
  <ol>{listItems}</ol>
);