Adding new element to array with useState React

Question

I am trying to add a couple of inputs from multi-select to array. Here is my code. Problem is that in the result previous element in the array is set undefined I have tried to do it in different ways, but it doesn't work.

const SignUp = ({signUp, projectsList}) => {


const [formData, setFormData] = React.useState({
    email: '',
    password: '',
    role: '',
    username: '',
    projects: [],
});

const handleChange = (name) => (event) => {
    console.log("event", event);
    if (name === "projects") {
        return setFormData({
            ...formData,
            [name]: event.map((v) => v.value),
        });

    } else {
        setFormData({
            ...formData,
            [name]: event.target.value,
        });
    }
};
const handleSubmit = (event) => {
    event.preventDefault();
    signUp(formData);
    history.push('/');
};
return {
 <Select
        name="projects"
        placeholder="Select Project"
        value={formData.projects}
        options={projectsList.map((proj) => {
            return {
                label: proj.name,
                value: proj.id
            }
        })}
        key={key + Math.random() + 11 * 1000}
        onChange={handleChange('projects')}
        isMulti={true}
        isClearable={true}
 />
}

The problem:

Haresh Samnani · Accepted Answer · 2022-03-07 16:29:26Z

1

Here you go:

First things first, there is no need to have key={key + Math.random() + 11 * 1000}. Key prop should be applied to parent divisions preferably getting unique ids from back-end.

import React, { useState } from "react";
import Select from "react-select"

const options = [
  {
    label: "p1",
    value: 1
  },
  {
    label: "p2",
    value: 2
  },
  {
    label: "p3",
    value: 3
  },
  {
    label: "p4",
    value: 4
  }
]

function App() {

  const [projects, setProjects] = useState([])

  const handleChange = (name, values) => {
    if (name === "projects") {
      const captured = values.map((ele) => {
        return ele.value
      })
      setProjects(captured)
    } else {
      // logic for other than name = projects
    }
  }

  return (
    <div className="App">
      <Select
        isMulti={true}
        options={options}
        onChange={(element) => handleChange("projects", element)}
      />
    </div>
  );
}

export default App;

Screenshot:

answered Mar 7, 2022 at 16:29

Haresh Samnani

8126 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jsN00b Over a year ago

Firstly, (+1) for the answer. Couple of points: A) Please consider if captured may be removed and instead we may directly do the update like so: if (name === 'projects') setProjects(values.map(({value}) => value);. B) There is one observation, if I may share: the OP seems to use setFormData with the intention to consolidate all of the form's inputs into one structure, and may be potentially use the same handleChange method for multiple inputs.

Haresh Samnani Over a year ago

(A) I kept 'captured' because the author of the question had the if block so I thought that might be important ? Nevertheless, you are right, 'captured' can be removed if wanted. Also, setProjects(values.map(ele => ele.value)) can also work. No problem in that. (B) Well handleChange can be used for multiple inputs. It all depends on the structure.

Collectives™ on Stack Overflow

Adding new element to array with useState React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related