React - customers.map is not a function

Question

My problem is: when I try to change the inputs it throw customers.map is not a function. I'd like to change value and update data in the database.

//hook for fetching
    const [customers, setCustomers] = useState([]);

    //fetching data from db by id
    useEffect(() => {
        Axios.get(`http://localhost:3001/profile/${id}`)
            .then((response) => {
                if (response) {
                    setCustomers(response.data);
                }
                else {
                    alert('Error')
                }
            })
    }, [])

And here is how I try to map, otherwise it seems like, onChange method causes the problem.

    {customers.map(customer =>
        <div key={customer.id}>
            <div className="containerProfile">
                <div className="leftInputProfile">
                    <p>Full Name</p>
                    <input type="text" name='Fullname' placeholder={!customer.Fullname && "Adja meg az adatot"}
                        onChange={(e) => {
                            setCustomers({ ...customers, [e.target.name]: e.target.value });
                        }}
                    />
                </div>
            </div>
        </div>

I know that, .map() method have to get an array, but I don't know the solution here :(

response.data:

what's in `response.data` ? pls attach your response as well — Zain Khan, Mar 01 '22 at 12:08
You should check if `response.data` is an array and from the error you see, it probably isn't. — George Pandurov, Mar 01 '22 at 12:12

score 0 · Answer 1 · edited Mar 08 '22 at 20:33

0

I think your problem is in your onChange event you are setting your customers to an object {} which does not have the .map function by calling

setCustomers({ ...customers, [e.target.name]: e.target.value });

You have to call it with brackets [] instead of curly braces {}:

setCustomers([ ...customers, yourNewCustomer ]);

edited Mar 08 '22 at 20:33

marc_s

732,580
175
1,330
1,459

answered Mar 01 '22 at 12:28

m_wer

1,038
1
11
19

okay, i'm so thankful :D it's working (.map is not a function DONE) But i got another error....if i change value all mapped inputs are duplicated O_O – Reamsy Mar 01 '22 at 12:40
what should i write at "yourNewCostumer"? – Reamsy Mar 01 '22 at 12:41
now "yourNewCostumer" is e.target.value – Reamsy Mar 01 '22 at 12:42
I was not aware that you edit the customer, thought you wanted to add new ones. Take a look at the other answer from @Alserda, he even provided a 'updateCustomer' method, which should probably help you! – m_wer Mar 01 '22 at 12:46

score 0 · Answer 2 · edited Mar 08 '22 at 20:33

You're setting the state to become an object:

setCustomers({ ...customers, [e.target.name]: e.target.value });

If you want to update a specific customer you could write a separate handler such as:

const updateCustomer = (customerId) => (event) => {
  const index = customers.findIndex((customer) => customer.id === customerId);

  const nextCustomers = customers.splice(index, 1, {
    ...customers[index],
    [event.target.name]: event.target.value,
  });

  setCustomers(nextCustomers);
}

You have to find the object to update, update it and replace it in the current state.

Your input should have at least <input name='Fullname' onChange={updateCustomer(customer.id)} value={customer.Fullname} />

You have to assign the value property too, as you're making it a controlled component with your input element.

React - customers.map is not a function

2 Answers2