How to print string using an array in reactjs? Please Helppp!

[naimiii]

I have been trying to take an empty array and then pushing any string in it using a button’s onClick event. Also ,I need to show all items in the array on the same page.
here’s my code

import React , {useState} from 'react';

function Counter(){
  const [items, setItems] = useState([])
  const addItem =() =>{
    setItems([...items, {
      id: items.length,
      value: ''

    }])
    console.log(items)
  }
  return (
    <div>
    <button onClick={addItem}> Add Items</button>
    <ul>
    {items.map(item =>(
      <li key={item.id}>{item.value} </li>
    ))}
    </ul>
    </div>
  )
}
export default Counter;

output:

[nivethakrishnan72]

Hi @naimiii ,

I have a few questions related to your queries.

• Where are you getting the string from? (are you getting the string from API or from the frontend input field.)

• If it is from the front-end, create an input field and a button to add items

I hope this helps.

[DanCouper]

The value for every single items’ value is an empty string, so you are printing it. What were you expecting to see? An empty string is an empty string, if you want a non-empty string, then you actually need to use a non-empty string.

[naimiii]

@DanCouper I wanna push strings in an empty array.

[DanCouper]

So is the code you’ve posted what you want to do? Or is it not? Because

const addItem =() =>{
    setItems([...items, {
      id: items.length,
      value: '' // <---- maybe put the string here????
    }])
  }