Question 44563 in Html Question posted in
Some basic documentation can be found here.

I test a website in react and my functions are not showing when I run my code – Html

`

function bannner() {
    const title = "c'est pur 😎"
      return (<h1>{title}</h1>)
    }

function cart() {
    const prixbedo = 10
    const prixhero = 20
    const prixcoc = 70
    return (<div>
            <h2>Panier</h2>
            <ul>
            <li>bedo : {prixbedo}$</li>
            <li>heroïne : {pixhero}$</li>
            <li>cocaïne : {prixcoc}$</li>
            </ul>
        </div>)
}

ReactDOM.render(<div><banner /><cart /></div>, document.getElementById("root"))

i declared my file .js in my file .html when I test with simple function is good I see on my website the result but with this code nothing happens

Tags:

3

Answers


  1. 0

    You need to create root.

    function bannner() {
    const title = "c'est pur 😎"
      return (<h1>{title}</h1>)
    }

function cart() {
    const prixbedo = 10
    const prixhero = 20
    const prixcoc = 70
    return (<div>
            <h2>Panier</h2>
            <ul>
            <li>bedo : {prixbedo}$</li>
            <li>heroïne : {pixhero}$</li>
            <li>cocaïne : {prixcoc}$</li>
            </ul>
        </div>)
}

const root = ReactDOM.createRoot( document.getElementById("root"))
root.render(<div><banner /><cart /></div>)
    Login or Signup to reply.
  2. 0

    You should not write the name of the tale in lowercase.
    Causes an error in the function rendering.

    Write as follows:

    function Banner() {
  const title = "c'est pur 😎"
  return <h1>{title}</h1>
}

function Cart() {
  const prixbedo = 10
  const prixhero = 20
  const prixcoc = 70
  return (
    <div>
      <h2>Panier</h2>
      <ul>
        <li>bedo : {prixbedo}$</li>
        <li>heroïne : {prixhero}$</li>
        <li>cocaïne : {prixcoc}$</li>
      </ul>
    </div>
  )
}

ReactDOM.render(
  <div>
    <Banner />
    <Cart />
  </div>,
  document.getElementById("root")
)
    Login or Signup to reply.
  3. 0

    I think your component not showing up is because you used lower case to write your functions just like other people have pointed out. I just wanted to give more context.

    According to the react docs here, in JSX, lower-case tag names are considered to be HTML tags. eg

    <cart /> compiles to React.createElement(‘cart’) (html tag).

    <Cart /> compiles to React.createElement(Cart) (a react component)

    So because <cart /> is not a recognised tag, it doesn’t show. Hope this helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search