score: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
};
score: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);
};
score:0
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;
Source: stackoverflow.com
Related Query
- saving and displaying array to states in react
- In React How can I fetch data and render a single object in a states array without mapping the whole thing?
- Fetch and array of objects from a database and displaying it with react
- Array and Objects of states in React
- Searching and Displaying Array with React JS
- Filtering an array and then mapping it isn't displaying results with React Hooks
- passing and displaying array of objects in react js
- Getting data from a JSON array and setting states based on the data using loop in React
- Saving array of objects in state and passing it to return to display it on web page in react
- Fetching and Displaying data from multi-dimension array repeatedly in React
- How do I update states `onChange` in an array of object in React Hooks
- Sort an array of objects in React and render them
- interface states and props in typescript react
- Typescript and React setting initial state with empty typed array
- React Iterate and insert components based on count of array
- How do I use React and forms to get an array of checked checkbox values?
- How do I clear states or empty array on click in react 0.14 ES6?
- backbone.router and React states
- RxJS and React multiple clicked elements to form single data array
- Setting an array to null and then updating it in useEffect React
- Importing data from excel and displaying in a react component
- How to handle object and Array in react native?
- React & Webpack: Loading and displaying images as background-image
- React hooks useState/setState not working after sorting the array and passing it
- mapping an array of objects and changing the value with on onClick in React
- Save and retrieve states with redux-persist - React Native
- Loop through array of file urls and download each one with React
- React / Typescript : pushing obj into array of object and undefined type
- How to find object in array and show it in React component?
- Syntax to change image source based on states and props in react
More Query from same tag
- ReactJS Fixed-Data-Table and Async JSON for DataListStore
- don't call function if a nested element was clicked
- Why isn't my setState working correctly? I want to add a div element onClick
- React-native <Text> not wrapped in inner flex
- Why React renders a component even though I don't pass anything to it?
- Uploading Image in Reactjs form
- React JS Div to png or capture of Div
- How to resolve act() in useEffect?
- Why React.Component is not displayed on a particular route?
- How can I use React hooks in React classic `class` component?
- How can i resolve the syntax error from this code
- setState(): Do not mutate state directly. Use setState()
- Token not being set in cookies
- react leaflet not showing updated state
- Understanding consequences of using bad react keys
- React 0.14 - using refs via findDOMNode
- getting issue in text not in proper line
- TypeError: Cannot read property 'value' of null in React Form
- Mongoose query for fetching documents based on conditions and between certain dates
- Dispatching different actions with multiple axios requests
- A hook as an array
- Two different parenthesis syntax in return statement
- Testing disabled button reactjs
- How to read Promise resolved value from a function call
- How to unit test a method of react component?
- How to change each value from an array inside an array of objects?
- How to update key values behalf of Id's
- Unable to mock module in jest
- I can't type in input text using reactjs
- Component not rendering within .map forEach