React - Empty Array When Rendering JSON Data

Question

Why is an empty array created when rendering this JSON array? See attached screenshot I assume the constructor is just initiating it with a null value and filling it at a later point.

New to Javascript + React and just want to make sure I am understanding what is happening. I will also accept critique on the garbage code that is below. Codepen link

class Jobs extends React.Component {
  render() {
    const jobs = this.props.jobs;
    console.log(jobs);
    const formattedJobs = jobs.map((job) =>
      <ul key={job.id}> 
        <div class="company">{job.company_name}</div>
        <div class="title">{job.title}</div>
      </ul>
    );
    return(
      <div>{formattedJobs}</div>
    );
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state={
      jobs:[]
    }
  var myUrl = "https://codepen.io/jobs.json";
  fetch(myUrl)
    .then((response) => response.json())
    .then((json) => this.setState({jobs: json.jobs}));
  }

  render() {
    return (
    <div className="app">
      <div className="header">
        <h1 id="header-title">Job Postings</h1>
      </div>
      <div className="content">
        <Jobs jobs={this.state.jobs}/>
      </div>
    </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

nicowernli · Accepted Answer · 2017-07-07 05:28:03Z

1

You are getting the jobs from an ajax request wich is async. Thats why the initial value is an empty array.

App.render is executed before your ajax request is finished and thats why you are not givin any job to the Jobs component. Once the ajax is finished, the jobs array is filled with the results and sendeded to the Jobs component to render the results of that ajax request.

answered Jul 7, 2017 at 5:28

nicowernli

3,34826 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

amishpanda Over a year ago

Got it, thank you. That makes sense. I had more reading to do about ajax, fetch, and Javascript but I'm seeing it now.

Vikram Saini · Accepted Answer · 2017-07-07 05:35:12Z

1

always use fetch statements in ComponentDidMount as it is called just after your component is rendered for the very first time

ComponentDidMount {
 fetch(myUrl)
    .then((response) => response.json())
    .then((json) => this.setState({jobs: json.jobs}));
}

answered Jul 7, 2017 at 5:35

Vikram Saini

2,7521 gold badge21 silver badges33 bronze badges

1 Comment

amishpanda Over a year ago

Will do, I was avoiding handling it correctly just so I could get the thing to print out. But I'll update this to handle all the cases.

Community · Accepted Answer · 2020-06-20 09:12:55Z

Jobs component

always be nice for default props - component can / will render before fetch returns response
replace class with className as first one is restricted word in JSX
ul can only contains li childs - not div
nice for use key property when you iterate over collection

App component

there is place for suppor unexpected response, you can set new state like error and support it
please consider with component is responsible to support errors and spinners- App or Jobs

Ract application

class Jobs extends React.Component {
  render() {
    const { jobs } = this.props;
    const formattedJobs = jobs.map(job =>
      <ul key={job.id}>
        <li className="company">{job.company_name}</li>
        <li className="title">{job.title}</li>
      </ul>
    );

    return <div>{formattedJobs}</div>;
  }
}

Jobs.defaultProps = {
  jobs: []
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      jobs: []
    };
  }

  componentDidMount() {
    fetch("https://codepen.io/jobs.json")
      .then(response => response.json())
      .then(response => {
        if (!Array.isArray(response.jobs)) {
          throw new Error(
            `Expected response but got ${JSON.stringify(response.jobs)}`
          );
        } else {
          return response.jobs;
        }
      })
      .then(jobs => this.setState({ jobs }));
  }

  render() {
    return (
      <div className="app">
        <div className="header">
          <h1 id="header-title">Job Postings</h1>
        </div>
        <div className="content">
          <Jobs jobs={this.state.jobs} />
        </div>
      </div>
    );
  }
}

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

Thank you for the feedback. Updating to meet those concerns you raised. I'm getting the hang of it now.

Collectives™ on Stack Overflow

React - Empty Array When Rendering JSON Data

3 Answers 3

1 Comment

1 Comment

Jobs component

App component

Ract application

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Jobs component

App component

Ract application

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related