React js project random quote machine

html: <div id="app"</div>

import React from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
const QueryBox =({quote,handleNewQuote})=>{
      <div id="Quote-box">
      <p id="text">{quote.text}</p>
      <h2 id="author">{quote.author}</h2>
      <div class="actions">
        <button id="new-quote" class="button" onClick={handleNewQuote}>New Quote</button>
        <a href="https://twitter.com/intent/tweet" id="tweet-quote" target="_blank">Tweet</a>
    </div>
    </div>
}
const App =()=> {
  const [quote,newquote]=React.useState({text:"Hello World",author:"Gopi"})
  const handleNewQuote=()=>{
    
  }
  return (
      <div class="main">
        <QueryBox quote={quote} handleNewQuote={handleNewQuote}/>
      </div>
            )
};
ReactDOM.render(<App />,document.querySelector("#app"));

iam getting lot of errors why

Post your Codepen (looks like Codepen imports)

  • You didn’t close the starting <div> tag correctly in the HTML you posted.

  • Make sure you set JS to use Babel in the Codepen JS settings.

Other than that, I don’t see any errors with your code. In fact, I don’t see anything at all as you are not returning the JSX in the QueryBox component.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.