Cannot print out object in ReactJS

Question

I am a novice in ReactJS. I want to print out the image and text in the state object, but I do not know why it does not work when the system does not show any error. The following is my code

import React, { Component } from 'react';

class Asgn6 extends Component {
  constructor(){
    super();
    this.state={
      content:[
        {srcImg:"../img/1.png", text:"Black"},
        {srcImg:"../img/2.png", text:"Blue"},
        {srcImg:"../img/3.png", text:"Green"}
      ]
    }
  }
  add=() => {

  }
  render() {
    return (
        <div>
        {this.state.content.map((obj, index)=> {
          return (
          <div key={index}>
          <img src={require(obj.srcImg)} alt={obj.text}/>
          <p>{obj.text}</p>
          </div>
          );
        })}
          );
        <button onClick={this.add}>Add</button>
        </div>



    );
  }

}

export default Asgn6;

Is Add button showing up ?

Jeffin
– Jeffin

2017-09-20 08:26:34 +00:00
Commented Sep 20, 2017 at 8:26 — Jeffin
– Jeffin, Commented Sep 20, 2017 at 8:26
Yes, the button shows up but there's no img and text

Alice
– Alice

2017-09-20 08:29:17 +00:00
Commented Sep 20, 2017 at 8:29 — Alice
– Alice, Commented Sep 20, 2017 at 8:29

dfsq · Accepted Answer · 2017-09-20 08:27:20Z

3

The first rule you need to remember about automatic semicolon insertion is to keep whatever you return on the same line after return keyword. Otherwise this

return
  <div>
    <img src={require(obj.srcImg)} alt={obj.text}/>
    <p key={index}>{obj.text}</p>
  </div>

is equivalent to

return;
  <div>
    <img src={require(obj.srcImg)} alt={obj.text}/>
    <p key={index}>{obj.text}</p>
  </div>

Note, how semicolon is inserted after return.

Simple fix can be

return <div>
  <img src={require(obj.srcImg)} alt={obj.text}/>
  <p key={index}>{obj.text}</p>
</div>

or use parenthesis to group your returns:

return (
  <div>
    <img src={require(obj.srcImg)} alt={obj.text}/>
    <p key={index}>{obj.text}</p>
  </div>
)

answered Sep 20, 2017 at 8:27

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

Alice Over a year ago

Thanks. I already fix as you told me but now I got the error "Cannot find module '.' " and it highlights the img tag. Is there something wrong with the img tag?

dfsq Over a year ago

Did you set up webpack to load images like this? Take a look at this stackoverflow.com/questions/32612912/…

Егор Кротенко · Accepted Answer · 2017-09-20 09:51:51Z

0

<img src={obj.srcImg} alt={obj.text}/>

just do this.

answered Sep 20, 2017 at 9:51

Егор Кротенко

8183 gold badges14 silver badges35 bronze badges

1 Comment

Alice Over a year ago

Thanks, but only the alt show up, the image is still nowhere to be found. It seems that require() gives me the error. The program works properly without require

Collectives™ on Stack Overflow

Cannot print out object in ReactJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related