React json как обратится к определенной части массива по id

Question

как обратится к определенной части массива по id ? Допустим у меня есть файл json и в нем вот такой массив

[
    {
        "id": 0,
        "imgUrl": "",
        "Sizewidth": 1420,
        "title": "1",
        "textItem": "As key"
    },
    {
        "id": 1,
        "imgUrl": "",
        "Sizewidth": 940,
        "title": "2",
        "textItem": "As key"
    },
    {
        "id": 2,
        "imgUrl": "",
        "Sizewidth": 460,
        "title": "3",
        "textItem": "As key"
    },
    {
        "id": 3,
        "imgUrl": "",
        "Sizewidth": 460,
        "title": "4",
        "textItem": "As key"
    }
]

А в другом файле я уже обращаясь к json и хочу взять данные только из части массива id 3 , как это сделать ?

Код выводит весь массив, а как сделать на определенную часть что то не выходит

import TestJson from './TestJson.json'

    <div>
          {TestJson.map((obj)=> (
              <h1>{obj.title}</h1>
          ))}
    </div>

Answer 1

const x = [{
    "id": 0,
    "imgUrl": "",
    "Sizewidth": 1420,
    "title": "1",
    "textItem": "As key"
  },
  {
    "id": 1,
    "imgUrl": "",
    "Sizewidth": 940,
    "title": "2",
    "textItem": "As key"
  },
  {
    "id": 2,
    "imgUrl": "",
    "Sizewidth": 460,
    "title": "3",
    "textItem": "As key"
  },
  {
    "id": 3,
    "imgUrl": "",
    "Sizewidth": 460,
    "title": "4",
    "textItem": "As key"
  }
];

const isValue = (value) =>
  value !== undefined && value !== null && value !== "";

const App = () => {
  const { id, Sizewidth, imgUrl, textItem, title } =
    x.find(({ id }) => id === 3) || {};
 
  return isValue(id) ? (
    <div>
      <div>{id}</div>
      <div>{imgUrl}</div>
      <div>{Sizewidth}</div>
      <div>{title}</div>
      <div>{textItem}</div>
    </div>
  ) : (
    <div>not found</div>
  );
};



// Рендеринг
ReactDOM.render( <
  App / > ,
  document.getElementById('react')
);

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

БЛОГ НА HUSL

React json как обратится к определенной части массива по id

Ответы (1 шт):