saving and displaying array to states in react

Question

I'm trying to create a small comment box using react.

My user will input into a name and comment box.

This gets saved as an array and added to the existing state array.

The updated data gets mapped into a table and displayed.

I can see the updated arrays in my console, but nothing is displayed. What have I done wrong?

    import '../App.css';
import React, { useState } from 'react';

function App(props) {
  const [userName, setUserName] = useState("");
  const [userComment, setUserComment] = useState("");
  const [commentArray, setCommentArray] = useState([]);

  const commentWrite = (event) => {
    event.preventDefault();
    let comment = [
      {
        name: `${userName}`,
        comment: `${userComment}`
      }
    ];
    setCommentArray([...commentArray, comment]);
    console.log(commentArray);
  };


  const comments = commentArray.map((comment, index) => {
    return (
        <tr key={index}>
            <td>{comment.name}</td>
            <td>{comment.comment}</td>
        </tr>
    )
});

  return (
    <>


      <div className="wrapper">
        <header className="App-header">
          <h1>Comment box</h1>
        </header>
        <div className="commentInput">
          <form >
            <input type="text" placeholder="Name" required onChange={e => setUserName(e.target.value)}></input>
            <input type="text" placeholder="Comment" required onChange={e => setUserComment(e.target.value)}></input>
            <button type="submit" onClick={(event) => { commentWrite(event, userName, userComment) }} >Post</button>
          </form>
        </div>

        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Comment</th>
            </tr>
          </thead>
          <tbody>
            {comments}
          </tbody>
        </table>

      </div>
    </>
  );
}

export default App;

Marc Baumbach · Accepted Answer · 2021-09-28 05:28:43Z

2

When you add a new comment to the comment array, you are adding it as an array of one object. This results in your comment array having a nested array, however your rendering of the comment array expects objects inside of it.

You probably want to rewrite the comment code to create an object and not an array of a single object:

let comment = {
    name: userName,
    comment: userComment
};

edited Sep 28, 2021 at 5:28

answered Sep 28, 2021 at 5:14

Marc Baumbach

10.5k2 gold badges32 silver badges47 bronze badges

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

Comments

Jai248 · Accepted Answer · 2021-09-28 05:16:24Z

0

That id because you are contacting the wrong thing in your function commentWrite. You are appending array inside an array. The solution will be :

  const commentWrite = (event) => {
    event.preventDefault();
    let comment = [
      {
        name: `${userName}`,
        comment: `${userComment}`
      }
    ];
    setCommentArray([...commentArray, ...comment]);
    console.log(commentArray);
  };

Or you can do one thing is Make comment as JSON object

  const commentWrite = (event) => {
    event.preventDefault();
    let comment = {
        name: `${userName}`,
        comment: `${userComment}`
      };
    setCommentArray([...commentArray, comment]);
    console.log(commentArray);
  };

answered Sep 28, 2021 at 5:16

Jai248

1,64910 silver badges24 bronze badges

Comments

Md.Emran Sikder · Accepted Answer · 2021-09-28 05:49:34Z

Here is the solution for you

import '../App.css';

import React, { useState } from 'react';

function App(props) {
  const [userName, setUserName] = useState("");
  const [userComment, setUserComment] = useState("");
  const [commentArray, setCommentArray] = useState([]);

  const commentWrite = (event) => {
    event.preventDefault();
    let comment = [
      {
        name: userName,
        comment: userComment
      }
    ];
    setCommentArray([...commentArray, comment]);
 
  };


  const comments = commentArray.map((comment, index) => {
    return (
      <tr key={index}>
            <td>{comment[0].name}</td>
            <td>{comment[0].comment}</td>
        </tr>
  )
});

  return (
    <>


      <div className="wrapper">
        <header className="App-header">
          <h1>Comment box</h1>
        </header>
        <div className="commentInput">
          <form >
            <input type="text" placeholder="Name" required onChange={e => setUserName(e.target.value)}></input>
            <input type="text" placeholder="Comment" required onChange={e => setUserComment(e.target.value)}></input>
            <button type="submit" onClick={(event) => { commentWrite(event, userName, userComment) }} >Post</button>
          </form>
        </div>

        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Comment</th>
            </tr>
          </thead>
          <tbody>
            {comments}
          </tbody>
        </table>

      </div>
    </>
  );
}

export default App;

Collectives™ on Stack Overflow

saving and displaying array to states in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related