How would you go about adding two input values to a multidimensional array in React?

user_15195417 0
Viewed 178

Say I have the following array:

    import {useState} from 'react';
    
    const [products, setProducts] = useState([
      {name: "Television", price: 1000},
      {name: "Cellphone", price: 800},
      {name: "Pen", price: 1}
    ])

and the following inputs and a button on another component:

<input placeholder="Name" value={} onChange={} />
<input placeholder="Price" value={} onChange={} />
<button onClick={insert function here}>Save</button>

How does one grab the new value from both inputs and add them as a new array to the original products array so that the result would be:

[
          {name: "Television", price: 1000},
          {name: "Cellphone", price: 800},
          {name: "Pen", price: 1},
          {name: "Chocolate", price: 5}
        ]

and not:

[
          {name: "Television", price: 1000},
          {name: "Cellphone", price: 800},
          {name: "Pen", price: 1},
          {name: "Chocolate"},
          {price: 5},
        ]

Thank you!

reactjs input arrays javascript
2 Answers

You can do this a couple of ways, I'll highlight one here as an example and mention others below.

For input fields, you want to store the value in state, for a functional component, that would like this:

export const MyComponent = () => {
  const [products, setProducts] = useState([
    {name: "Television", price: 1000},
    {name: "Cellphone", price: 800},
    {name: "Pen", price: 1}
  ]);
  const [name, setName] = useState('');
  const [price, setPrice] = useState(0);

  const addProduct = () => {
    setProducts([...products, {name, price}]);
  };

  return (
    <input placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
    <input placeholder="Price" value={price} onChange={(e) => setPrice(e.target.value)} />
    <button onClick={addProduct}>Save</button>
  ); 
};

In this example, we're using state to control the input values documentation. You can also make this more dynamic with multiple inputs that are child components and you can add many at once. It is very extensible.

An alternative approach would be to store a ref to the inputs and grab the values when you click. In general you'd want react to control the inputs, but there are exceptions. You can read more about ref here: documentation

Additional Note on syntax: In the above example, we're using array destructuring to add a value to the array. This creates a new array and helps to keep in mind that the products array is immutable and changes to it won't be reflected in the component.

user_11284410

first of all you need two states for your inputs :

const [name,setName] = useState("");
const [price,setPrice] = useState(0);

now you have to connect your inputs to your states:

<input placeholder="what ever" value={name} onChange={(e)=>{setName(e.target.vaklue)}} />

<input placeholder="what ever" value={price} onChange={e=>{setPrice(e.target.value)}} />

and in button you have a submit function in onClick like this :

function handleSubmit(){
    setProduct([...products,{name,product}]);
}

.

<button onClick={handleSubmit}>Save</button>
user_101262740
Related