如何使用 useState object 数组在 React 中添加 HTML 元素 onClick？

Question

I am fetching random users from an API and putting them in a useState object array, this works as I checked in console. The issue is I want to display a new user on button click but it doesn't work, however if I write the same JSX code outside of an onClick, it works, let me demonstrate:

This doesn't work

  const addUser = () => {
    object.map((item) => {
      return (
      <div>
        <h1>{item.firstName}</h1>
        <h1>{item.age}</h1>
        <h1>{item.gender}</h1>
        <img src={item.img} alt="" />
      </div>
      )
    })
  }

  return (
    <div className="App">
     <button onClick={addUser}
      >+</button>
    </div>
  );

This works:

 return (
    <div className="App">
      {object.map((item) => {
        return (
          <div>
            <h1>{item.firstName}</h1>
            <h1>{item.age}</h1>
            <h1>{item.gender}</h1>
            <img src={item.img} alt="" />
          </div>
        )
      })}
    </div>
  );

Here is the full code if it matters:

function App() {
  const URL = "https://randomuser.me/api/"

  const [object, setObject] = useState([{ firstName: 'jon', age: 20, gender: 'male', img: 'none' }])


  useEffect(() => {
    fetch(URL)
      .then(res => res.json())
      .then(data => {
        const result = data.results[0]
        const obj = {
          firstName: result.name.first,
          age: result.dob.age,
          gender: result.gender,
          img: result.picture.large
        }
        setObject(prevData => prevData.concat(obj))

      })
  }, [])

  const addUser = () => {
    object.map((item) => {
      return (
      <div>
        <h1>{firstName}</h1>
        <h1>{item.age}</h1>
        <h1>{item.gender}</h1>
        <img src={item.img} alt="" />
      </div>
      )
    })
  }

  console.log(object[0])
  console.log(object[1])


  return (
    <div className="App">
     <button onClick={() => addUser}
      >+</button>
    </div>
  );
}

export default App;

Answer 1

1. Two problems with your code are

• You are expecting a button onClick function to return DOM elements and somehow render them in your app.
• If you really want to show users only when the button is clicked, you can set a flag that turns true when clicked on the button and then show users list, returning DOM elements on button onClick won't render them.

2. Not wrapping addUser in return.

   const addUser = () => { return ( // existing code ) }

For code, you can checkhere