Add another row when click to add new question button

ReactJS >

I want to show by default 10 rows And a button with "Add a new question" so that would be the 11th row.

current row image here

Currently it’s only one row [refer to the image below]. And I want 10 initial rows and then add as required. And as many rows can add it could be able to scroll. And on submit I would have all the filled data from that input component. Maybe just console.log when to submit or to alert for now.
NOTE- using formik

Not adding code, because it’s a large component. perhaps here’s a codesandbox, When I am looking for a solution. If anyone can help me would be great. Please got stuck with this.

34 thoughts on “Add another row when click to add new question button”

  1. If you are using the functional components of React, what you can potentially do is use the useState hooks.

    For example, you will define your initial state with a list containing 10 questions.

    const [state, setState] = useState(QUESTION_LIST)

    Then, whenever you add a question, you can use the setState to add the question in.

    const add = (newQuestion) => { setState((prevState) => ([...prevState, newQuestion]))}

    For rendering, you will just need to use the map function to render all the questions in state.

    Reply

Leave a Comment