React function for making multiple class components

Question

So, I have a class component that loads some data from API:

class Item extends Component {
constructor(props) {
  super(props);
  this.state = {
    output: {}
  }
}

componentDidMount() {
    fetch(item_url[0])
      .then(response => response.json())
      .then(data => this.setState({ output: data }));
  }


render() {
    console.log(this.state.output);
    const { general = {name:"", description:""} } = this.state.output;
    const { brand = {name : ""} } = this.state.output;
    const { id } = this.state.output;
    const {images = {primary:{large:""}}} = this.state.output;
  return (
    <ItemPanel>
    <ItemBox>
    <BoxTitle>{general.name}</BoxTitle>
    <BoxId>Item ID: {id}</BoxId>
    <Details onClick={show_details}>Show more...</Details>
        <Inline>
        <Quantity type="number" defaultValue="1"></Quantity>
        <Icon>add_shopping_cart</Icon>
        </Inline>
        <AddItem>
        <Sfont>Add to cart</Sfont>
    </AddItem>
    </ItemBox>
        <BoxImg src={images.primary.large} alt='img error'></BoxImg>
   </ItemPanel>
  );
}
}
export default Item;

It works correctly with the API, address (URL) is inserted from this array:

let item_url = [
'http://localhost:3005/products/774944', 
'http://localhost:3005/products/774945', 
'http://localhost:3005/products/774946',
'http://localhost:3005/products/123581', 
'http://localhost:3005/products/782691', 
'http://localhost:3005/products/782485',
'http://localhost:3005/products/782486', 
'http://localhost:3005/products/782487', 
'http://localhost:3005/products/782488',
'http://localhost:3005/products/738471'];

What I want to achieve here is a function that renders this component multiple times (every time with another API data). I guess some kind of loop function is needed here, but can't figure it out. It is now rendered from my index.js like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Item from './DataHarvester'

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

But obviously, it creates only one component while I need to have 10.

Answer 1

You can use map to do this; typically the pattern is as follows:

1. Parent components requests data and places the result into some form of state
2. Within the render of the parent component, map over that state to produce child components
3. Child components can then render the data which they are passed from the parents

 const Section = (props) => ( <p>{props.url}</p> ); const App = () => { const urls = [ 'http://localhost:3005/products/774944', 'http://localhost:3005/products/774945', 'http://localhost:3005/products/774946', 'http://localhost:3005/products/123581', 'http://localhost:3005/products/782691', 'http://localhost:3005/products/782485', 'http://localhost:3005/products/782486', 'http://localhost:3005/products/782487', 'http://localhost:3005/products/782488', 'http://localhost:3005/products/738471' ]; return ( <div> {urls.map(x => <Section url={x}/>)} </div> ); }; ReactDOM.render(<App />, document.getElementById('r')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="r"></div>