How to render an image from an array in React?

Question

I am new to React. I just learned to create an api with nodejs and express from a MySQL. You can check out the json output api at app.subarnanto.com/api/inventory.

How do you render the image? This is my code. I also got a warning

Warning: Each child in an array or iterator should have a unique "key" prop

And the third one, how do I improve my code? Thanks

import React from 'react';
import axios from 'axios';

export default class Inventory extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      inventory: []
    }
  }

  componentDidMount() {
    axios.get('https://app.subarnanto.com/api/inventory').then(res => {
      this.setState({ inventory: res.data });
      console.log({ inventory: res.data });
    });
  }

  render() {
    return this.state.inventory.map(itemList => {
      let item = itemList;
      return (
        <div>
          <h4>Nama:  { item.name } </h4>
          <h4>Nomor Seri:  { item.serial } </h4>
          <h4>ID Tag:  { item.tag } </h4>
          <img src="{ item.image }"/>
        </div>
      );
    })
  }
}

Ihor Lavs · Accepted Answer · 2018-05-24 08:40:31Z

1

You use inappropriate syntax for src attribute. You should remove quotes from src: Also, each child from the array should have a unique identifier key. In your case it's better to use: <div key={ item.serial }>

The working example:

render() {
    return this.state.inventory.map(item => {
        return (
            <div key={ item.serial }>
                <h4>Nama:  { item.name } </h4>
                <h4>Nomor Seri:  { item.serial } </h4>
                <h4>ID Tag: { item.tag } </h4>
                <img src={ item.image } />
            </div>
        );
   })
}

answered May 24, 2018 at 8:40

Ihor Lavs

2,4633 gold badges18 silver badges28 bronze badges

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

Comments

Alberto · Accepted Answer · 2018-05-24 08:47:38Z

To render the images just delete the double quotes from img tag.

The warning can be removed adding a key property to each element of the returned list. This way React can handle the minimal DOM change. There's more info in the React documentation.

import React from 'react';
import axios from 'axios';

export default class Inventory extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            inventory: []
        }
    }

    componentDidMount() {
        axios.get('https://app.subarnanto.com/api/inventory').then(res => {
            this.setState({ inventory: res.data });
            console.log({ inventory: res.data });
        });
    }

    render() {
        return this.state.inventory.map(itemList => {
            let item = itemList;
            return (
                <div key={ item.id }>
                    <h4>Nama:  { item.name } </h4>
                    <h4>Nomor Seri:  { item.serial } </h4>
                    <h4>ID Tag:  { item.tag } </h4>
                    <img src={ item.image } />
                </div>
            );
        })
      }
}

Johnson Samuel · Accepted Answer · 2018-05-24 08:47:48Z

0

Change image source from "{ item.image }" to src={ item.image } as string.

Code:

render() {
    return this.state.inventory.map((itemList, key) => {
      let item = itemList;
      return (
        <div key={key}>
          <h4>Nama:  { item.name } </h4>
          <h4>Nomor Seri:  { item.serial } </h4>
          <h4>ID Tag:  { item.tag } </h4>
          <img src={ item.image }/>
        </div>
      );
    })
  }

For warning - Each child in an array should have a unique "key" prop:

React uses the key prop to understand the component-to-DOM Element relation.

edited May 24, 2018 at 8:47

answered May 24, 2018 at 8:41

Johnson Samuel

2,0862 gold badges20 silver badges33 bronze badges

2 Comments

Johnson Samuel Over a year ago

:) awesome.. you can mark it as correct if it works :D

Eko Andri Over a year ago

I can't chose more than 1 answer but thank you again.

supra28 · Accepted Answer · 2018-05-24 08:47:54Z

use a key for the dive tag. Read more about it here in react docs.

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:

React docs don't recommend indexes as keys more on it here

export default class Inventory extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      inventory: []
    }
  }

  componentDidMount() {
    axios.get('https://app.subarnanto.com/api/inventory').then(res => {
      this.setState({ inventory: res.data });
      console.log({ inventory: res.data });
    });
  }

  render() {
    return this.state.inventory.map(itemList => {
      let item = itemList;
      return (
        <div key={item.id}>
          <h4>Nama:  { item.name } </h4>
          <h4>Nomor Seri:  { item.serial } </h4>
          <h4>ID Tag:  { item.tag } </h4>
          <img src={item.image}/>
        </div>
      );
    })
  }
}

Collectives™ on Stack Overflow

How to render an image from an array in React?

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related