Display values of two different arrays in react component

Question

I am building a react app which will display courses and authors, both courses and authors array's i have to display the list of courses and their corresponding authors. i have used the array map method to map over all courses and display them but i am getting stuck how to display the corresponding authors. below is my code

    import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";

function CourseList(props) {
  return (
    <table className="table">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>Title</th>
          <th>Author Name</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        {props.courses.map(course => {
          return (
            <tr key={course.id}>
              <td>
                <button
                  className="btn btn-outline-danger"
                  onClick={() => {
                    props.deleteCourse(course.id);
                    toast.success("Course Deleted");
                  }}
                >
                  Delete
                </button>
              </td>
              <td>
                <Link to={"/course/" + course.slug}>{course.title}</Link>
              </td>
              <td>{props.authors.name}</td>
              <td>{course.category}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

CourseList.propTypes = {
  deleteCourse: PropTypes.func.isRequired,
  courses: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      title: PropTypes.string.isRequired,
      authorId: PropTypes.number.isRequired,
      category: PropTypes.string.isRequired
    })
  ).isRequired
};

export default CourseList;

below is my response Json

could anyone please help me in displaying the author name in author name cell.

What is props.authors.name? Shouldn't it be course.authors.name? — Singhi John
– Singhi John, Commented Mar 12, 2020 at 3:43

Barun Patro · Accepted Answer · 2020-03-12 06:47:21Z

1

well.. looking at your JSON response.. this could work.

<td>{props.authors.find(author => author.id === course.authorId).name}</td>

edited Mar 12, 2020 at 6:47

answered Mar 12, 2020 at 6:33

Barun Patro

9704 silver badges13 bronze badges

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

Comments

akhtarvahid · Accepted Answer · 2020-03-12 03:44:12Z

0

Change <td>{props.authors.name}</td> to <td>{course.authors.name}</td>

don't need to use props for that because you are accessing from array so just access object field of array.

If course.authors.name not found just console your author name and then access that

answered Mar 12, 2020 at 3:44

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

5 Comments

Zahid Hussain Over a year ago

in course array there is no name elements, authors are present in authors array

akhtarvahid Over a year ago

@ZahidHussain share your json response.

Zahid Hussain Over a year ago

This is my authors data

[   {     "id": 1,     "name": "Cory House"   },   {     "id": 2,     "name": "Scott Allen"   },   {     "id": 3,     "name": "Dan Wahlin"   } ]

Zahid Hussain Over a year ago

is something like this possibe

let courses = [...props.courses];   courses.map(course => {     course.authorName = "zahid Hussain";     return course;   });

but i am using the hardcoded name instead of that i have to get it from authors array

akhtarvahid Over a year ago

@ZahidHussain edit your post and share your json response not what you have done

Collectives™ on Stack Overflow

Display values of two different arrays in react component

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related