React components are failing to display data as expected

Question

React components are failing to display data as expected

I need to display certain data based on the id provided in the url. When I use console.log() with res.json, I can see the data but I'm unsure how to pass it to the 'articleComponent'.

const Articles = () => {

  const query = (id) => {
    fetch(`https://someurl.herokuapp.com/job/${id}`).then(res => console.log(res.json()))
  }

  const pathname = window.location.pathname.split('/');
  const job_id = pathname[pathname.length - 1];
  const job = query(job_id);
  let position_name;
  let workplace_name;
  
  if (job) {
    position_name = position_name;
    workplace_name = workplace_name;
  }

  return (
    <ArticleComponent
      position_name={position_name}
      workplace_name={workplace_name}
    />
  );
};

export default Articles;

The console.log() shows 'pending' but all objects are visible.

This component is accessible after clicking this link:

<Link
   className="link-apply"
   to={{pathname: `/job/${job._id}`,
     state: job
   }}>
   <p className="place">{job.workplace_name}</p>
   <p className="location-job">{job.location}</p>
</Link>

javascript reactjs react-router react-router-v4

Answer 1

Answer №1

You haven't utilized the response from the fetch call.

In a functional component of React, the function itself serves as the render function. This function operates synchronously, meaning that an async call cannot be directly placed within the function body.

One approach is to make the fetch call within the componentDidMount lifecycle hook. Once the call returns, you can store the result in the component state using setState for class components or the useState hook for functional components.

So:

class Articles extends React.Component {
  state = {
    data: undefined
  };

  componentDidMount() {
    const id = "some value";
    fetch(`https://someurl.herokuapp.com/job/${id}`)
      .then(res => res.json())
      .then(response => this.setState({ data: response }));
  }

  render() {
    const pathname = window.location.pathname.split('/');
    const job_id = pathname[pathname.length - 1];
    const job = query(job_id);
    let position_name;
    let workplace_name;
    console.log(job_id)
    if (job) {
      position_name = position_name;
      workplace_name = workplace_name;
    }


    return (
      <ArticleComponent
        data={this.state.data}
        position_name={position_name}
        workplace_name={workplace_name}
      />
    );
  }
};

export default Articles

Answer 2

You haven't utilized the response from the fetch call.

In a functional component of React, the function itself serves as the render function. This function operates synchronously, meaning that an async call cannot be directly placed within the function body.

One approach is to make the fetch call within the componentDidMount lifecycle hook. Once the call returns, you can store the result in the component state using setState for class components or the useState hook for functional components.

So:

class Articles extends React.Component {
  state = {
    data: undefined
  };

  componentDidMount() {
    const id = "some value";
    fetch(`https://someurl.herokuapp.com/job/${id}`)
      .then(res => res.json())
      .then(response => this.setState({ data: response }));
  }

  render() {
    const pathname = window.location.pathname.split('/');
    const job_id = pathname[pathname.length - 1];
    const job = query(job_id);
    let position_name;
    let workplace_name;
    console.log(job_id)
    if (job) {
      position_name = position_name;
      workplace_name = workplace_name;
    }


    return (
      <ArticleComponent
        data={this.state.data}
        position_name={position_name}
        workplace_name={workplace_name}
      />
    );
  }
};

export default Articles

Answer 3

Answer №2

It is important to separate the loading logic from rendering in your React components.

Start by creating a state for your data using useState(null) where null serves as the initial state value.
Next, use useEffect to initiate fetching data when the component mounts. Use an empty array [] as the second argument to ensure that the useEffect function only runs once during mount and does not depend on any specific value.

import React, { useEffect, useState } from 'react';

const fetchData = async (id, setData) => {
  const response = await fetch(`https://someurl.herokuapp.com/job/${id}`);
  const data = await response.json();
  setData(data);
}

const getJobId = () => {
  const pathname = window.location.pathname.split('/');
  return pathname[pathname.length - 1];
}

const Articles = () => {
  const [job, setJob] = useState(null);
  useEffect(() => {
    fetchData(getJobId(), setJob);
  } ,[]);

  return <>{
      job
      ? <ArticleComponent
        position_name={job.position_name}
        workplace_name={job.workplace_name}
      />
      : <span>loading...</span>
     }</>
};

export default Articles

Answer 4

It is important to separate the loading logic from rendering in your React components.

Start by creating a state for your data using useState(null) where null serves as the initial state value.
Next, use useEffect to initiate fetching data when the component mounts. Use an empty array [] as the second argument to ensure that the useEffect function only runs once during mount and does not depend on any specific value.

import React, { useEffect, useState } from 'react';

const fetchData = async (id, setData) => {
  const response = await fetch(`https://someurl.herokuapp.com/job/${id}`);
  const data = await response.json();
  setData(data);
}

const getJobId = () => {
  const pathname = window.location.pathname.split('/');
  return pathname[pathname.length - 1];
}

const Articles = () => {
  const [job, setJob] = useState(null);
  useEffect(() => {
    fetchData(getJobId(), setJob);
  } ,[]);

  return <>{
      job
      ? <ArticleComponent
        position_name={job.position_name}
        workplace_name={job.workplace_name}
      />
      : <span>loading...</span>
     }</>
};

export default Articles

Answer 5

Answer №3

Hello @Erwin,

I have provided a solution for your query below. Take a look at the CodeSandbox - [https://codesandbox.io/s/mystifying-wave-qxrnp][1]

Feel free to replace the API Endpoint with the one you prefer. I hope this information is useful!

import React from "react";
import ReactDOM from "react-dom";
import ArticleComponent from "./ArticleComponent";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: undefined
    };
  }

  componentDidMount() {
    const pathname = window.location.pathname.split("/");
    const job_id = pathname[pathname.length - 1];
    console.log(job_id);
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then(response => response.json())
      .then(json => this.setState({ data: json }));
  }

  render() {
    return this.state.data ? (
      <ArticleComponent data={this.state.data} />
    ) : (
      "Loading"
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 6

Hello @Erwin,

I have provided a solution for your query below. Take a look at the CodeSandbox - [https://codesandbox.io/s/mystifying-wave-qxrnp][1]

Feel free to replace the API Endpoint with the one you prefer. I hope this information is useful!

import React from "react";
import ReactDOM from "react-dom";
import ArticleComponent from "./ArticleComponent";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: undefined
    };
  }

  componentDidMount() {
    const pathname = window.location.pathname.split("/");
    const job_id = pathname[pathname.length - 1];
    console.log(job_id);
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then(response => response.json())
      .then(json => this.setState({ data: json }));
  }

  render() {
    return this.state.data ? (
      <ArticleComponent data={this.state.data} />
    ) : (
      "Loading"
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

React components are failing to display data as expected

Answer №1

Answer №2

Answer №3

Similar questions

Enabling the acceptance of blank values within an HTML5 date input field

Enhancing the aesthetic appeal of a form

Difficulty encountered while attempting to deploy the front-end on Heroku

Issue: ngModel: Unassignable Value

Exiting callback function in JavaScript

Comparing front end automation between JavaScript and Java or Ruby

What are the best practices for implementing serialization in NestJS?

Utilizing a keycode within the jQuery plugin without the need to explicitly pass it through options

Ways to transfer the value of a JavaScript variable to a PHP variable

Updating access tokens within a Google login component in React by utilizing django-allauth

What could be causing the error "Unexpected identifier 'trytoCatch' while trying to minify?

Ajax: The function assigned to the route does not get executed

Ways to integrate debounce functionality in a React text area field

Calling Node Express request inside a GET route

Unraveling nested elements with the array map() method in Angular2 and Typescript: Fixing the issue of undefined property reference while mapping

Is it possible to assign multiple ID's to a variable in jQuery?

What is the appropriate conversion for a CSS property name starting with -webkit when working with React?

I'm looking for the documentation for the latest version of Footable's Events. Can you point me

What is the best way to link PostgreSQL with a React frontend using restify?

Operating with a multidimensional entity