React. Вывод полученного json из fetch в компоненту

Question

Есть компонента, которую я вывожу у себя в приложении:

  function DetailBlock(){

      fetch('https://boiling-refuge-66454.herokuapp.com/images')
          .then(response=>response.json())
          .then(json=> console.log(json))

        return(
            <div>print json here! </div>
        )

  }


И соответственно где -то в приложении вывожу:
........ <DetailBlock/>

Есть фетч, откуда я получаю данные. Не могу разобраться в синтаксисе. Нужно получить контент из фетч и отправить на return,где я их могу замапить. Как это сделать синтаксически?

Answer 1

Используй useState хук, и если не знаком с этим, почитай основы реакта, рановато кодить без базы.

import React, {useState} from "react";

  function DetailBlock(){

      const [jsonData, setJsonData] = useState({});

      fetch('https://boiling-refuge-66454.herokuapp.com/images')
          .then(response=>response.json())
          .then(json=> setJsonData(json))

        return(
            <div>{jsonData}</div>
        )

  }

export default DetailBlock;

БЛОГ НА HUSL

React. Вывод полученного json из fetch в компоненту

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