sending props with multiple maps from parent component showing duplicate results-CodePudding

I am building a simple blog app in react in which, I have nested json data, so every json data have a unique nested json data, I will show with every blog.

json data

const blogs = [
    {
         id : 1,
         title: 'First Blog',
         comments : [
            {
                commentId : 1,
                body : 'First Comment', 
            },
            {
                commentId : 3,
                body : 'First Comment', 
            },
        ]
    },
    {
         id : 2,
         title: 'Second Blog',
         comments : [
            {
                commentId : 7,
                body : 'First Comment', 
            },
            {
                commentId : 9,
                body : 'First Comment', 
            },
        ]
    }
]

app.js

class App extends React.Component {
    render() {
         const blogs = this.state.blogs.map((blog) => (
           blog.comments.map((comment) => (
            <BlogDetail
              id={blog.id}
              key={blog.id}
              title={blog.title}
              commentId={comment.id}
            />
           )
         )
         return (
          <div>
            {blogs}
          </div>  
        )
    }
}

class BlogDetail extends React.Component {
    render() {
         return (
           <div>
               {this.props.id}
               {this.props.title}
           </div>
         )
    }
}

When I render BlogDetail component then it is showing one blog multiple times (depends on how many comments are on it).

I have tried many times but it is still showing this.

Any help would be much Appreciated. Thank You in Advance.

CodePudding user response：

According to your code, BlockDetail does show every comment in every post. In BlockDetail you render each comment in comments with the title, but in your json there is no such property as 'title', only the 'body'. What are you trying to achieve?

CodePudding user response：

const BlogDetail = (props) => {
         return (
           <div>
               {props.commentId}
                 {' '}
               {props.commentBody}
           </div>
         )
}

function App() {
// Blogs is the json you are using
     const blogs = Blogs.map((blog) => (
         <div>
             {blog.title}
             {blog.comments.map((comment) => (
            <BlogDetail
              key={blog.id}
              commentId={comment.commentId}
              commentBody={comment.body}
            />
           )
         )}
         <br />
        </div>
        ))
  return (
    <div>
            {blogs}
          </div>  
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Using this you will get an outcome like this

First Blog
1 First Comment
3 First Comment

Second Blog
7 First Comment
9 First Comment