Array not rendered React JS

Question

I have the following ToDo component which is called from the App component. I see that the items array is being updated properly from the console logs when the Add Item button is clicked but the contents of the items are not displayed below the button.

function ToDo(){
    const [items, setItems] = useState([])
    const [currItem, setCurrItem] = useState('')

    const handleClick = () => {
        if(!currItem) return
        console.log(currItem)
        let temp = items
        temp.push(currItem)
        setItems([...temp])
        console.log(items)
    }
    return(
        <div>
        <input type='text' onChange={(e) => setCurrItem(e.target.value)}/> 
        <br/>
        <button onClick={handleClick}>Add Item</button>
        <br/>
        <div> 
            {
                items.forEach(i => {
                 <div>{i}</div>   
                })
            }
        </div>
        </div>
    )
}

Try switching to items.map() instead of items.forEach() as forEach will not return anything while map returns a new array of the div elements: stackoverflow.com/questions/34426458/… — gloo
– gloo, Commented Jun 22, 2022 at 18:49
Tried .map() as well, still, the array items are not rendered. — Naveen Udhay
– Naveen Udhay, Commented Jun 22, 2022 at 18:58
You also need to add a return statement to return the div element you created, like so: items.map((i) => { return <div>{i}</div>; }) — gloo
– gloo, Commented Jun 22, 2022 at 19:03
Does this answer your question? When should I use a return statement in ES6 arrow functions — pilchard
– pilchard, Commented Jun 22, 2022 at 19:05

Tarik Gadoumi · Accepted Answer · 2022-06-22 19:12:59Z

1

hello try to change your code by adding this

  {items.map((v,i) => {
              return <div key={v}>{i}</div>;
            })}

answered Jun 22, 2022 at 19:12

Tarik Gadoumi

531 silver badge4 bronze badges

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

Comments

Aman Sadhwani · Accepted Answer · 2022-06-22 19:07:51Z

0

There is problem with your handleClick function try this

import React, { useState } from "react";
function ToDo() {
  const [items, setItems] = useState([]);
  const [currItem, setCurrItem] = useState("");

  const handleClick = () => {
    if (!currItem) return;
    console.log(currItem);
    let temp = [...items];
    temp.push(currItem);
    setItems(temp);
    console.log(items);
  };
  return (
    <div>
      <input type="text" onChange={(e) => setCurrItem(e.target.value)} />
      <br />
      <button onClick={handleClick}>Add Item</button>
      <br />
      <div>
        {items.map((i) => {
          return <div>{i}</div>;
        })}
      </div>
    </div>
  );
}

export default ToDo;

answered Jun 22, 2022 at 19:07

Aman Sadhwani

3,6183 gold badges20 silver badges29 bronze badges

Collectives™ on Stack Overflow

Array not rendered React JS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related