ReactJS - Difficulties on JSON return

Question

I'm having difficult to render a HTML from a return of a JSON data. It is cathing the JSON without any problem, but I can't render the HTML the way that I want. It is rendering a confuse HTML.

Here is my db.json

{
  "houses": [
  {     
    "name": "house 1",
    "description": "This is the description of the house 1",
    "photos": [      
      "photo1_house_1.jpg", "photo2_house_1.jpg", "photo3_house_1.jpg"       
    ]
  },
  {     
    "name": "house 2",
    "description": "This is the description of the house 2",
    "photos": [      
      "photo1_house_2.jpg", "photo2_house_2.jpg", "photo3_house_2.jpg"       
   ]
 },
 {
   "name": "house 3",
   "description": "This is the description of the house 3",
   "photos": [      
      "photo1_house_3.jpg", "photo2_house_3.jpg", "photo3_house_3.jpg"       
    ]
  }
 ]
}

Here is my component that is returning data from the JSON above

 import React, { Component } from 'react'
 import axios from 'axios'

 const URL_HOUSES = 'http://localhost:3001/houses';

class Houses extends Component {
   constructor(props) {
     super(props)
     this.state = {
     houses: []
   }
}

componentDidMount() {
  axios.get(URL_HOUSES)
    .then(res => {
      this.setState({ houses: res.data })
    })
  }

render() {
  return (
    <div>        
      {this.state.houses.map(item =>
        <div>
          <h2>{item.name}</h2>
          <p>{item.description}</p>
           <ul>           
             <li>{item.photos}</li>       
          </ul>
        </div>
      )}         
    </div>
   )
 }
}

export default Houses;

checking on the dev-tools it is returning this HTML:

<div>
  <h2>house 1</h2>
  <p>This is the description of the house 1</p>   
  <ul>
    <li>
      "photo1_house_1.jpg"
      "photo2_house_1.jpg"
      "photo3_house_1.jpg"
    </li>
    <li>
      "photo1_house_2.jpg"
      "photo2_house_2.jpg"
      "photo3_house_2.jpg"
    </li>
    <li>
      "photo1_house_3.jpg"
      "photo2_house_3.jpg"
      "photo3_house_3.jpg"
    </li>
  </ul>
<div>
<div>
  <h2>house 2</h2>
  <p>This is the description of the house 2</p>
  <li>
    "photo1_house_1.jpg"
    "photo2_house_1.jpg"
    "photo3_house_1.jpg"
  </li>
  <li>
    "photo1_house_2.jpg"
    "photo2_house_2.jpg"
    "photo3_house_2.jpg"
  </li>
  <li>
    "photo1_house_3.jpg"
    "photo2_house_3.jpg"
    "photo3_house_3.jpg"
  </li>
</ul> 
</div> 
<div>
  <h2>house 3</h2>
  <p>This is the description of the house 3</p>
    <ul>
    <li>
      "photo1_house_1.jpg"
      "photo2_house_1.jpg"
      "photo3_house_1.jpg"
    </li>
    <li>
      "photo1_house_2.jpg"
      "photo2_house_2.jpg"
      "photo3_house_2.jpg"
   </li>
   <li>
     "photo1_house_3.jpg"
     "photo2_house_3.jpg"
     "photo3_house_3.jpg"
   </li>
  </ul>
 </div>
</div>

Then I would like to return something like this:

  <h2>house 1</h2>
  <p>This is the description of the house 1</p>   
  <ul>
    <li>"photo1_house_1.jpg"</li>
    <li>"photo2_house_1.jpg"</li>
    <li>"photo3_house_1.jpg"</li>        
  </ul>
<div>
<div>
  <h2>house 2</h2>
  <p>This is the description of the house 2</p>     
  <ul>
    <li>"photo1_house_2.jpg"</li>  
    <li>"photo2_house_2.jpg"</li>  
    <li>"photo3_house_2.jpg"</li>        
  </ul> 
</div> 
<div>
  <h2>house 3</h2>
  <p>This is the description of the house 3</p>
    <ul>
      <li>"photo1_house_3.jpg"</li>  
      <li>"photo2_house_3.jpg"</li> 
      <li>"photo3_house_3.jpg"</li>             
    </ul>
 </div>
</div>

klugjo · Accepted Answer · 2018-04-02 05:39:22Z

1

You need 2 nested .map in your render method:

render() {
  return (
    <div>        
      {this.state.houses.map(item =>
        <div>
          <h2>{item.name}</h2>
          <p>{item.description}</p>
           <ul>
             {item.photos.map(p => <li>{p}</li>)}
          </ul>
        </div>
      )}         
    </div>
   )
 }
}

answered Apr 2, 2018 at 5:39

klugjo

21k10 gold badges65 silver badges83 bronze badges

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

Comments

Ali Faris · Accepted Answer · 2018-04-02 05:38:49Z

1

you should make another loop for the photos array

return (
    <div>
        {
            this.state.houses.map(item =>
            <div>
                <h2>{item.name}</h2>
                <p>{item.description}</p>
                <ul>
                    {
                        item.photos.map(photo => <li>{photo}</li>)
                    }
                </ul>
            </div>
        )}
    </div>
)

answered Apr 2, 2018 at 5:38

Ali Faris

18.7k12 gold badges51 silver badges75 bronze badges

Collectives™ on Stack Overflow

ReactJS - Difficulties on JSON return

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related