Styjun

I'am pretty new to React and i'm trying to render an API but it's creating new Table at every endpoint, the problem i think is because i'm mapping but i don't know what else to do.

Thanks in advance for the help.

Should i maybe create a new component for the Table

 class App extends Component 
 constructor() 
 super();
 this.state = ;
 
 componentDidMount() 
 fetch(url)
 .then(results => 
 return results.json();
 )
 .then(data => 
 let coins = data.map(coin => 
 return( 
 <div>

 <Table striped bordered hover variant="dark">
 <thead>
 <tr>
 <th>#</th>
 <th>Sign</th>
 <th>Name</th>
 <th>Market Cap</th>
 <th>Price</th>
 <th>Change 24h</th>
 <th>Buy</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>coin.market_cap_rank</td>
 <td>coin.symbol</td>
 <td>coin.name</td>
 <td>coin.market_cap</td>
 <td>coin.current_price</td>
 <td>gerfds</td>
 <td>@mdo</td>
 </tr>

 </tbody>
 </Table>
 </div>
 )
 );
 this.setState( coins: coins );
 );
 
 render() 
 return (
 <div className="container">
 <HeadJumbotron />
 <div className="container2">this.state.coins</div>
 </div>
 );
 

is OK that you are very new to react, always try to read docs, especially on component life-cycle you don't seem to understand it. you might encounter some errors on the code because i don't know what your api is returning. but this is how your code should look like.

 class App extends Component 
 constructor() 
 super();
 this.state = 
 // i am asumming you are returning data
 data : [];
 ;
 
 componentDidMount() 
 fetch(url)
 .then(results => 
 //return results.json(); get the data from here and set it to state here. am assuming is called data
 this.setState(
 data:results.data
 )
 )

 
 render() 

 let coins = this.state.data.map(coin => (


 // i am assuming you have and id field else change it to any unique value
 <tr key=coin.id>
 <td>coin.market_cap_rank</td>
 <td>coin.symbol</td>
 <td>coin.name</td>
 <td>coin.market_cap</td>
 <td>coin.current_price</td>
 <td>gerfds</td>
 <td>@mdo</td>
 </tr>





 ))
 return (
 <div className="container">
 <HeadJumbotron />
 <div className="container2">
 <table striped bordered hover variant="dark">
 <thead>
 <tr>
 <th>#</th>
 <th>Sign</th>
 <th>Name</th>
 <th>Market Cap</th>
 <th>Price</th>
 <th>Change 24h</th>
 <th>Buy</th>
 </tr>
 </thead>
 <tbody>
 coins
 </tbody>
 </table>
 </div>
 </div>
 )
 

Just want to add to Alcantara answer:

1. 
   

   super() is used for extending props from React library

   
   
   

    constructor(props) 
    super(props); 
    this.state = 
    data : [];
    ;
    
   

   
   


2. 
   

   You more often will see map function executed inside JSX (that what your problem was initially)

   
   
   

   render() 
    return (
    <div className="container">
    <HeadJumbotron />
    <div className="container2">
    <table striped bordered hover variant="dark">
    <thead>
    <tr>
    <th>#</th>
    <th>Sign</th>
    <th>Name</th>
    <th>Market Cap</th>
    <th>Price</th>
    <th>Change 24h</th>
    <th>Buy</th>
    </tr>
    </thead>
    <tbody>
    this.state.data.map(coin => (
    <tr key=coin.id>
    <td>coin.market_cap_rank</td>
    <td>coin.symbol</td>
    <td>coin.name</td>
    <td>coin.market_cap</td>
    <td>coin.current_price</td>
    <td>gerfds</td>
    <td>@mdo</td>
    </tr>))
    </tbody>
    </table>
    </div>
    </div>
    )
    
   

   
   



3. I might be wrong for your particular case (I can't see what the data and styles all about), but more conventional way of displaying list of stuff is using <ul></ul> <li></li> tags