How to render images with reactjs?-Random Quote Generator

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 :

class MyComponent extends React.Component{
      messages:[{quote1: "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe. ", author:'Albert Einstein',im:""}, {quote1:'So many books, so little time.',author:'Frank Zapa',im:""},{quote1:"Be who you are and say what you feel, because those who mind don't matter", author:"Bernard M. Baruch",im:""}],
      quote:"So many books, so little time.",
      author:"Frank Zapa"
  const Rndm=Math.floor(Math.random()*4)
    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 id="author-img" style={{width:"300px"}}><img src= {} ></div>
        <div id="new-quote"> <p>{this.state.quote}</p></div> 
        <div id="author" style={{paddingBottom:"10px"}}>{}</div>
        <a id="tweet-quote">lnk</a>
        <button type="submit" onClick={this.handleSubmit}>New Quote</button>

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

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)

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

Thankyou so much

My other suggestion to you is to assign a random quote to the initial state, so you are not hard coding the the quote, the author and the image as you are now.