Each object is stored separately in useState React | how to store in an array?-CodePudding

I written code a dynamic form whose codes are given below, but my problem is in storing it in the useState formFields , which is stored in an array / Each object is stored separately, but I want them to be stored in an array ‍‍question.

this is my input:

[
{ titleQuestion: "aaa", metric: "bbb", subMetrico: "ccc" },
{ titleQuestion: "bbb", metric: "bbb", subMetrico: "ccc" },
{ titleQuestion: "ccc", metric: "bbb", subMetrico: "ccc" }
]

but i want to be like this:

{
    "quetions": [
          { titleQuestion: "aaa", metric: "bbb", subMetrico: "ccc" },
          { titleQuestion: "bbb", metric: "bbb", subMetrico: "ccc" },
          { titleQuestion: "ccc", metric: "bbb", subMetrico: "ccc" }
        
    ],
}

this is my all code:

  const [formFields, setFormFields] = useState([])

  // Add Question
  const handleFormChange = (event, index) => {
    let data = [...formFields];
    // data[index][event.target.name] = event.target.value;
    setFormFields(data);
  }

  const submit = (e) => {
    e.preventDefault();
    console.log(formFields)
  }

  const addFields = () => {
    let object = {
      titleQuestion: '',
      metric: '',
      subMetrico:''
    }

    setFormFields([...formFields, object])
  }

  const removeFields = (index) => {
    let data = [...formFields];
    data.splice(index, 1)
    setFormFields(data)
  }

and:

<div className="App">
      <form onSubmit={submit}>
        {formFields.map((form, index) => {
          return (
            <div key={index}>
              <input
                name='titleQuestion'
                onChange={event => handleFormChange(event, index)}
                value={form.titleQuestion}
              />
              <input
                name='metric'
                onChange={event => handleFormChange(event, index)}
                value={form.metric}
              />
               <input
                name='subMetric'
                onChange={event => handleFormChange(event, index)}
                value={form.subMetric}
              />
              <button onClick={() => removeFields(index)}>Remove</button>
            </div>
          )
        })}
      </form>
      <button onClick={addFields}> </button>
      <br />
      <button onClick={submit}>submit</button>
    </div>

UPDATE:

{
    "quetions": [
          { titleQuestion: "aaa", metric: "bbb", subMetrico: "ccc" },
          { titleQuestion: "bbb", metric: "bbb", subMetrico: "ccc" },
          { titleQuestion: "ccc", metric: "bbb", subMetrico: "ccc" }

    ],
     "post_id":10
}

CodePudding user response：

You need to change the following functions so that your array is stored inside the questions key in the object

  const [formFields, setFormFields] = useState({})

  // Add Question
  const handleFormChange = (event, index) => {
    let data = [...formFields.quetions];
    // data.quetions[index][event.target.name] = event.target.value;
    setFormFields({ quetions: data });
  }

      const addFields = () => {
        let object = {
          titleQuestion: '',
          metric: '',
          subMetrico:''
        }
    
        if(formFields.quetions)
            setFormFields({ quetions: [...formFields.quetions, object] });
        else 
            setFormFields({ quetions: [object] });
      }

  const removeFields = (index) => {
    let data = [...formFields.quetions];
    data.splice(index, 1)
    setFormFields({ quetions: data })
  }