CODEWITHSUNDEEP
javascriptjsonreactjsaxios
droid
droid

Reputation: 68

get images from json url using axios

I am beginner in React trying to fetch images from https://api.randomuser.me I am using axios to create fetch request to the api and display the images in img-wrapper div but the images are not being imported. I AM able to fetch string data. When I try to use map in img src I get the error 'Expected an assignment or function call and instead saw an expression'

reactjs

class form extends Component{
    constructor(props){
        super(props);

        this.state={
            answer:'',
            persons:[]
        }
        this.handleChange=this.handleChange.bind(this);
        this.handleSubmit=this.handleSubmit.bind(this);
    }

    componentDidMount(){
        axios.get('https://api.randomuser.me')
            .then(res=>{
                this.setState({ persons: res.data.results });
                
            })
    }

render(){
 
        return (
            <div>
                <section className="login">
                    <div className="loginContainer">
                        <div className="heading">
                        </div>
                        <div className="img-wrapper">
                          
                            <img src={this.state.persons.map(person=>{person.picture.large})}/>
                          
                        </div>

json

{
  "results": [
    {
      "picture": {
        "large": "https://randomuser.me/api/portraits/men/79.jpg",
        "medium": "https://randomuser.me/api/portraits/med/men/79.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/men/79.jpg"
      },
      "nat": "FI"
    }
  ],
  "info": {
    "seed": "0019bcd5bce99412",
    "results": 1,
    "page": 1,
    "version": "1.3"
  }
}

Upvotes: 2

Views: 916

Answers (1)

wangdev87
wangdev87

Reputation: 8751

Itereate this.state.persons using Array.map() and render imgs.

{this.state.persons.map(person => 
  <img src={person.picture.large}/>
)}

Upvotes: 1

Related Questions