Как добавить изображение в первый реагирующий компонент и игнорировать остальные компоненты, используя функцию карты

Question

Я пытаюсь добавить содержимое в компонент, используя файл json, где мне требуется только первый компонент, чтобы изображение обложки и остальные компоненты игнорировали его.

Schema:  "TrackList": [
    {
      "CourseNo": "1",
      "CourseName": "C++ Programming with DataStructures",
      "CoverImg":"example.com/cover.jpg"
    },
    {
      "CourseNo": "2",
      "CourseName": "Competitive Programming"
    },
    {
      "CourseNo": "3",
      "CourseName": "Java"
    }
  ]

ниже код отображается по мере необходимости, но он также добавляет пустое изображение в компоненты, кроме первого.

render(){
 const { Data } = this.props;
    const Courses = Data.TrackList.map(course => {
      return (
        <li>
          <span>Course {course.CourseNo}</span>
          <a href='#path-10'>{course.CourseName}</a>
          <img src={course.CoverImg}/>
        </li>
      ) 
    });


return(
 <div className='col-md-4 right-pannel'>
    <ul>
    {Courses}
    </ul>
 </div>
 )
}

Answer 1

Array.prototype.map вызывает предоставленную функцию обратного вызова с текущим индексом массива (в качестве второго аргумента). Первый индекс массива - 0, поэтому вам просто нужно добавить логи c, которые гарантируют, что изображение будет добавлено только тогда, когда индекс равен 0, например:

  const Courses = Data.TrackList.map((course, i) => {
    return (
      <li>
        <span>Course {course.CourseNo}</span>
        <a href='#path-10'>{course.CourseName}</a>
        { i === 0 && <img src={course.CoverImg}/> }
      </li>
      ) 
    });

А вот слегка измененная версия вашего кода, превращенная в исполняемый фрагмент:

const Data = {"TrackList": [{"CourseNo": "1","CourseName": "C++ Programming with DataStructures","CoverImg":"example.com/cover.jpg"},{"CourseNo": "2","CourseName": "Competitive Programming"},{"CourseNo": "3","CourseName": "Java"}]}

const Courses = Data.TrackList.map((course, i) =>
  <li>
    <span>CourseNo: {course.CourseNo}</span>
    <span> | CourseName: {course.CourseName}</span>
    { i === 0 && <span> | CoverImg: {course.CoverImg}</span> }
  </li>
);

ReactDOM.render(
  <div className='col-md-4 right-pannel'>
    <ul>
    {Courses}
    </ul>
  </div>,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

Или более универсальным c решением может быть приведенный ниже код, как видно из ваших данных, другой объект не имеет ключа CoverImg .

const Courses = Data.TrackList.map(course => {
      return (
        <li>
          <span>Course {course.CourseNo}</span>
          <a href='#path-10'>{course.CourseName}</a>
          {course.CoverImg && <img src={course.CoverImg}/>}
        </li>
      ) 
    });

Answer 3

Вы можете поставить условие с && для отображения только объекта с изображением

Оптимизировано

-Уникальный ключ для каждой строки

- && условие для доступного пути к изображению

- другой способ удаления return(){}

Код

  render() {
    const { Data } = this.props;
    const Courses = Data.TrackList.map(course => (
      <li key={course.CourseNo}>
        <span>Course {course.CourseNo}</span>
        <a href="#path-10">{course.CourseName}</a>
        {course.CoverImg && <img src={course.CoverImg} alt="imgicon" />}
      </li>
    ));

    return (
      <div className="col-md-4 right-pannel">
        <ul>{Courses}</ul>
      </div>
    );
  }