CODEWITHSUNDEEP
mysqlnode.jsreactjsexpressaxios
Eko Andri
Eko Andri

Reputation: 191

How to render an image from an array in React?

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>
      );
    })
  }
}

Upvotes: 2

Views: 4695

Answers (4)

supra28
supra28

Reputation: 1636

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>
      );
    })
  }
}

Upvotes: 0

Johnson Samuel
Johnson Samuel

Reputation: 2076

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.

Upvotes: 0

Alberto
Alberto

Reputation: 1408

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>
            );
        })
      }
}

Upvotes: 0

Ihor Lavs
Ihor Lavs

Reputation: 2463

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>
        );
   })
}

Upvotes: 1

Related Questions