Bug: about react

[animesh9893]

Hii @Karim-Muhammad, can you please checkout this. https://codesandbox.io/s/falling-snow-2kn7hk?file=/src/App.js

That map of authors code is returning an array which is type of object.

So and as you can see in error

Objects can't be render as child.

[mr07s]

@Karim-Muhammad I think I have solved your issue please check it out

https://codesandbox.io/s/dazzling-dust-tx2qwm?file=/src/App.js

[Karim-Muhammad]

That map of authors code is returning an array which is type of object.

the message error says use array instead of object, and i really return authors.map()(array), so message error doesn't clarify the problem enough, actually it make confusion, that's my point

yeah, I know type of array is object, but we actually can render an Array(Object) in JSX in case it is child not parent to

for example, by this example if we did that

<div> {array} </div> //Correct

that's OK, but if array is a parent (without a container

)

return {array} // Wrong

it throw an Error (not meaningful message) says as I mentioned above "cannot render object" instead of "cannot have multiple root elements"

the Error message you have shown above, says what i did already in my code, i'm trying to render an Array, and avoid using "Object"

I don't know if you got my point, I apologize for any confusion.

[Karim-Muhammad]

Thanks for your time, I appreciate that

my point is that error message doesn't clarify my problem precisely

[pcha07]

Based on the error message you provided, it seems that the issue lies in how you are rendering the postsList.jsx array in your PostsList component. The error suggests that you are trying to render an object instead of an array.

To resolve this issue, you need to wrap the postsList.jsx array in a parent element when returning it from the component. One way to achieve this is by using a React fragment (<>...</>) as suggested in the error message. Here's an updated version of your PostsList component:
import {useSelector } from "react-redux ; import { selectAllPosts } from '../../app/features/posts/slicer';

const PostsList = (props) => { const posts = useSelector(selectAllPosts); const postsListjsx = posts.map(post => ( <article key={post.id}> <h3>{post.title}</h3> <p>{post.content.substring(0, 100)}</p> </article> ));

return ( <> {postsListjsx} </> ); }

export default PostsList;

By wrapping the postsListjsx array in <>...</>, you create a parent element that contains the array elements. This allows you to return multiple elements without encountering the "Adjacent JSX elements must be wrapped in an enclosing tag" error.

After making this change, the error you mentioned should be resolved, and the PostsList component should render the list of posts correctly.