Setting a jsx element value to fetch call value-CodePudding

I'm making a custom jsx element. I want to set the element's value to data, that a fetch call returns:

const BoardPage = () => {
    const id = useParams().id

    fetch('http://localhost:8000/getBoardByID', {
        headers: {
            'Content-type': 'application/json'
        },
        method: 'POST',
        body: JSON.stringify({ id: id })
    }).then(response => response.json()).then(data => {
        console.log(data)
        
        return (
            <div>
                <h1>board #{data.id}</h1>
            </div>
        )
    })
}

export default BoardPage

In console i see an object: {id: 31, board_content: '', width: 1223, height: 2323, user_privileges: '[]'}
But i get nothing as the output

CodePudding user response：

You have to perform the request inside the useEffect hook.

const MyComponent = () => {
  const id = useParams().id;
  const [data, setData] = useState({});

  React.useEffect(() => {
    fetch("http://localhost:8000/getBoardByID", {
      headers: {
        "Content-type": "application/json",
      },
      method: "POST",
      body: JSON.stringify({ id: id }),
    })
      .then((response) => response.json())
      .then((data) => {
        setData(data);
      });
  }, []);

  return (
    <div>
      <h1>board #{data?.id}</h1>
    </div>
  );
};