How to render images with reactjs?-Random Quote Generator

1

Hi , Im trying to include an authors pic in the random quote machine excersise by adding an image url as a property in an objects array and trying to render it in the source attribute on an img tag.So far its not working , any help would be highly appreciated. this is my code :

and on codepen : https://codepen.io/tonytony92/pen/yLNMgXP?editors=1111

class MyComponent extends React.Component{
  constructor(props){
    super(props)
    this.state={
      messages:[{quote1: "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe. ", author:'Albert Einstein',im:"https://cdn2.dineroenimagen.com/media/dinero/styles/xlarge/public/images/2019/12/el2dediciembredelao1905alberteinsteindioaconocerunodelosavancescientficosmsimporta.jpg"}, {quote1:'So many books, so little time.',author:'Frank Zapa',im:"https://garajedelrock.com/wp-content/uploads/2018/12/zappa-1024x685.jpg"},{quote1:"Be who you are and say what you feel, because those who mind don't matter", author:"Bernard M. Baruch",im:"https://upload.wikimedia.org/wikipedia/commons/c/c8/BARUCH%2C_BERNARD_2.jpg"}],
      quote:"So many books, so little time.",
      author:"Frank Zapa"
    }
   this.handleSubmit=this.handleSubmit.bind(this)
  }
  
handleSubmit(){
  const Rndm=Math.floor(Math.random()*4)
  this.setState({
    quote:this.state.messages[Rndm].quote1,
    author:this.state.messages[Rndm].author,
    im:this.state.messages[Rndm].im
  })
  
}
 
  render(){
    return (
      
    <div id="quote-box"style={{color:"blue", backgroundColor:"red",width:"300px", height:"auto", padding:"0px 15px", paddingBottom:"10px", borderRadius:"10px"}}>
       <div id='text'>
    <h1>Random Quote Machine</h1>
         </div> 
        <div id="author-img" style={{width:"300px"}}><img src= {this.state.im} ></div>
        <div id="new-quote"> <p>{this.state.quote}</p></div> 
        <div id="author" style={{paddingBottom:"10px"}}>{this.state.author}</div>
        <a id="tweet-quote">lnk</a>
        <button type="submit" onClick={this.handleSubmit}>New Quote</button>
    </div>  
    )
  }
}


ReactDOM.render(<MyComponent/>, document.getElementById('some'))
2

For starters, img elements are self-closing, so you must include the / inside the tag.

Also, get rid of the onLoad attribute, as that is doing nothing here.

Lastly, the following is going to be a problem since you only have 3 quotes. I recommend not using a fixed value here. Instead, you can reference a specific property of the message array to use here.

const Rndm=Math.floor(Math.random()*4)
3

Hi, thanks for replying. I already remove Onload, closed the img tag and the const Rndm is working fine with this.state.quote and this.state.author and its now working with this.state.im. Also already changed the const Rndm to take 3 quotes instead of 4.

Thankyou so much