-2

`

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

  • 1
    React 18 [has a different render method](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html). Also both of your components should be in PascalCase: so `Cart` and `Banner`. – Andy Mar 03 '23 at 14:34

3 Answers3

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>)
  • 1
    I want to add to @Roman Nichi answer that you need to Capitalize your function declaration names since its the way to let React now that your functions are not just functions, but React Components. ``` function Bannner(){...} function Cart(){...} in JSX: ``` – Bryan Hain Mar 03 '23 at 14:34
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")
)
Mina
  • 48
  • 7
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

Amaka
  • 141
  • 1
  • 8
  • finally the problem does not come from the code I tested it on codepen and it shows the good result but on my computer when I launch it they do not work – romaric Mendy Mar 03 '23 at 15:13