i want to add 2 data(may be 1) object in an array where array is a state of react

Question

So here is my query, this is a small part of my code that is relevant to the question I want 3 input fields for different data input from users as in case the user wants to add another seller detail he can use the add button to show more 3 input fields to fill up same kind of data but for different seller after getting 1 or 2 data objects from the user I want to add them to my state

import { Input } from "@mui/material";
import React, { useEffect, useState } from "react";
import "react-toastify/dist/ReactToastify.css";
const PlaceInfo = ({ questionCount, placeInfo, setPlaceInfo }) => {



const [vendorCount, setVendorCount] = useState(1);

const [vname, setVname] = useState("");
const [vname2, setVname2] = useState("");
const [sname, setSname] = useState("");
const [sname2, setSname2] = useState("");
const [pno, setPno] = useState("");
const [pno2, setPno2] = useState("");

const [v1, setv1] = useState();
const [v2, setv2] = useState();


const createV1 = (value, of) => {
switch (of) {
  case "vname":
    setVname(value);
    break;
  case "sname":
    setSname(value);
    break;
  case "pno":
    setPno(value);
    break;

  default:
    break;
}

const vendor = {
  vname,
  sname,
  pno,
  };
setv1(vendor);
 };
 const createV2 = (value, of) => {
switch (of) {
  case "vname":
    setVname2(value);
    break;
  case "sname":
    setSname2(value);
    break;
  case "pno":
    setPno2(value);
    break;

  default:
    break;
}

const vendor = {
  vname,
  sname,
  pno,
};
setv2(vendor);
};

  setPlaceInfo(placeInfo.vegetablesStoresName , [v1,v2])
  console.log(placeInfo.vegetablesStoresName)
  console.log([v1,v2])

return (
<div className="">
  
  {questionCount == 8 && (
    <div className="question   ">
      <div className="flex mb-10 font-semibold text-xl text-sky-700">
        <h1 className="mr-2 ">{questionCount}.</h1>
        <h4 className="font-semibold text-lg">
          Please provide top 2 vegetables stores' name.{" "}
        </h4>
      </div>

      <button
        type="button"
        onClick={() => {
          setVendorCount(2);
        }}
      >
        add
      </button>
      {vendorCount === 2 && (
        <button
          type="button"
          onClick={() => {
            setVendorCount(1);
          }}
        >
          remove
        </button>
      )}
      <div className="flex space-x-1">
        <Input
          placeholder="Vendor Name"
          onChange={(e) => createV1(e.target.value, "vname")}
          required
        />
        <Input
          placeholder="Shop Name"
          onChange={(e) => createV1(e.target.value, "sname")}
          required
        />
        <Input
          placeholder="Phone No"
          onChange={(e) => createV1(e.target.value, "pno")}
          required
        />
      </div>
      {vendorCount === 2 && (
        <div className="flex space-x-1">
          <Input
            placeholder="Vendor Name"
            onChange={(e) => createV2(e.target.value, "vname")}
            required
          />
          <Input
            placeholder="Shop Name"
            onChange={(e) => createV2(e.target.value, "sname")}
            required
          />
          <Input
            placeholder="Phone No"
            onChange={(e) => createV2(e.target.value, "pno")}
            required
          />
        </div>
      )}
    </div>
  )}


</div>
);
};

export default PlaceInfo;

I am getting data in single objects now but I want to set it into a setstate if anyone can help me with my current logic will be great but if you have any other easier logic please help me with that too i want data to look like this

[

    { sellerName:'ramesh gupta ', ShopName:'gupta bhandar', mobileNo:'9874563210'},
    { sellerName:'sunil shetty ', ShopName:'shetty veggie store', mobileNo:'9874563210'}
]

Answer 1

from where you are getting a single object, there you should use the thread operator to copy old obj/data and add new obj/data