Express + React Problem

I have an Express API that sends a JSON object. This object has a property that is an array of objects. One of the properties in those objects is ‘title’.

How would I use fetch to set the state with this JSON object, and display that title property from the state in a JSX element?

Do you have some code to show us what you’re attempting to do?

1 Like

@joshuaboulton When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


1 Like

This is the Argument model:

var argumentSchema = new Schema({
  title: String,
  premises: Array,
  conclusion: String

This is the Express API route:

router.get("/", (req, res) => {
  Argument.find({}, (err, result) => {
    if (err) console.log(err);

    res.json({ claims: result });

This is the contents of the React component:

constructor(props) {
    this.state = {
      ideas: []

  componentWillMount() {
      .then(res => res.json())
      .then(res => {


  render() {
    return <h1>{this.state.ideas[0].title}</h1>;

In this component, if I change that h1 to some simple text (like “Hello world”) it runs error free - that console.log works, displaying an object as I expect in the console. I don’t understand why I’m unable to access this.state.ideas[0].title, though. :confused: It says it is undefined.

Thanks in advance for any help!

Hey @joshuaboulton,
the Component’s setState method is asynchronous, so the console.log will run before the method returns a result.

1 Like

If you try the following, can you show us what gets displayed to the console?

}, () => console.log(this.state.ideas));

Not sure which version of React you are using, but you might want to use componentDidMount instead of componentWillMount.

1 Like

What @RandellDawson said.
componentWillMount is being deprecated.

1 Like

When I switch to componentDidMount and change the console.log to use that callback, I get the same console.log I got before, which is this:

Thanks for the heads up re: componentWillMount, by the way. :slight_smile:

If you have not yet figured it out, try:

        <h1>{ this.state.ideas[0] &&

This will conditionally render this.state.ideas[0].title only if this.state.ideas[0] has a value which is not falsy. So as long as this.state.ideas[0] is an object, it’s title will be rendered.

1 Like