How to add dynamically text field in react js

my requirement is to add text field dynamically

step 1: add button to add fields

step 2: declare usestate


  const [showFormRow, setShowFormRow] = useState(false);
  const [showFormRow1, setShowFormRow1] = useState(false);
  const [showFormRow2, setShowFormRow2] = useState(false);
  const [showFormRow3, setShowFormRow3] = useState(false);

step3 while click button apply all true false on state using usestate

const handleButtonClick = () => {
    if (showFormRow2) 
    {
      console.log('data aata hain')
      setShowFormRow(true);
      setShowFormRow1(true);
      setShowFormRow2(true)
      setShowFormRow3(true);

    }
    else if(showFormRow1) 
    {
      console.log('data aata hain2')
      setShowFormRow(true);
      setShowFormRow1(true);    
      setShowFormRow2(true);
      setShowFormRow3(false);
    }
    else if(showFormRow) 
    {
      console.log('data aata hain1')
      setShowFormRow(true);
      setShowFormRow1(true);
      setShowFormRow2(false);
      setShowFormRow3(false);
    }
    else{
      console.log('data aata hain0')
      setShowFormRow(true);
      setShowFormRow1(false);
      setShowFormRow2(false)
      setShowFormRow3(false);
    }
  };

step 4:when editing state is true

  useEffect(() => {
    if (editingQuestion !== null && isClientEditing === true) {
      setValues({
        ...initialState,
        Question: editingQuestion.question,
        answerone: editingQuestion.answer_one,
        answertwo: editingQuestion.answer_two,
        answerthree: editingQuestion.answer_three,
        answerfour: editingQuestion.answer_four,
        answerfive: editingQuestion.answer_five,
        answersix: editingQuestion.answer_six,
        answerseven: editingQuestion.answer_seven,
        answereight: editingQuestion.answer_eight,

      })
    } else {
      setValues(initialState)
    }
  }, [editingQuestion, isClientEditing])

step 5: show text field option when either of the condition is true first state is true when click button or edting state is true

 {(values.answerfive || showFormRow) && (
                      <FormRow
                      type="text"
                      labelText="option five"
                      name="answerfive"
                      required={true}
                      value={values.answerfive}
                      handleChange={handleChange}
                      placeholder="Enter Answer"
                      />
                      )}                     
                      {(values.answersix || showFormRow1) && (
                      <FormRow
                      type="text"
                      labelText="option six"
                      name="answersix"
                      required={true}
                      value={values.answersix}
                      handleChange={handleChange}
                      placeholder="Enter Answer"
                      />
                      )}
                      {(values.answerseven || showFormRow2) && (
                      <FormRow
                      type="text"
                      labelText="option seven"
                      name="answerseven"
                      required={true}
                      value={values.answerseven}
                      handleChange={handleChange}
                      placeholder="Enter Answer"
                      />
                      )}
                      {(values.answereight || showFormRow3) && (
                      <FormRow
                      type="text"
                      labelText="option eight"
                      name="answereight"
                      required={true}
                      value={values.answereight}
                      handleChange={handleChange}
                      placeholder="Enter Answer"
                      />
                      )}

Debug School

How to add dynamically text field in react js

Top comments (0)