A JSX element doesn't show it's content

byMR

November 11, 2023

I am new to React. I’m trying to make a navbar for my app. But I encounter a few problems

the contents of the <Btn></Btn> is not visible
the css doesn’t affects anything

Tools that I use:

Firefox with react developer extension
Ubuntu 23.04
VS Code
Tailwindcss

my index.js file

import React from 'react';
import ReactDOM from 'react-dom/client';
import './twcss-out.css';

//Import when we need routing in the future
/*import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
*/

const root = ReactDOM.createRoot(document.getElementById('root'));

/* FOR TESTING ONLY
const Test = (props) => {
  let {title, sectionTitle} = props;
  return (
    <div>
      <h1 className='font-sans'>{title}</h1>
      <p className='font-sans'>{sectionTitle}</p>
      <hr/>
    </div>
  )
}
*/
const Btn = ({content, extraClasses}) => {
  return (
    <button type='button' className={'bg-primary text-white p-2 rounded'+extraClasses}>{content}</button>
  );
}


const RootDiv = () => {
  const textFormatting = {
    B: ' font-bold',
    I: ' font-italic',
    U: ' underline'
  }
  const {B, I, U} = textFormatting; 
  return (
    <div>
      <nav className='bg-primary flex flex-1 flex-col'>
        <h1 className='text-xl font-bold text-white py-2 ms-1'>SkyPress</h1>
        <section role='toolbar' className='rounded bg-green-300 grid grid-cols-3 '>
          <section role='group' className='btn-group'>
              <Btn extraClasses={B}>B</Btn>
              <Btn extraClasses={I}>I</Btn>
              <Btn extraClasses={U}>U</Btn> 
          </section>
        </section>
      </nav>      
    </div>
  ); 
}

root.render(
  <RootDiv/>
);

my index.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="stylesheet" href="../src/twcss-out.css">
    <style>
      .btn-group:first-child {
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
      }
      .btn-group:last-child {
          border-top-right-radius: 0.25rem;
          border-bottom-right-radius: 0.25rem;
      }
    </style>
    <title>React App</title>
  </head>
  <body>
    <noscript>Please enable javascript</noscript>
    <div id="root"></div>
    <script src="../src/index.js"></script>
  </body>
</html>

my console outputs and error

console output

also I see something interesting in the devtools panel

interesting devtools panel

Look at the button element. It somehow doesn’t have anything inside it but in the index.js file there’s the letter B, I and U inside of it

I tried reading the react docs, and ofcourse don’t get any info
I also tried adding the letters B, I, and U to the respective buttons through devtools, it worked and the style are applied, but ofcourse I can’t tell the user to click f12 and fix that for me everytime

>Solution :

Rename the content prop to children.

const Btn = ({children, extraClasses}) => {
  return (
    <button type='button' className={'bg-primary text-white p-2 rounded'+extraClasses}>{children}</button>
  );
}

See https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children

Alternatively you can explicitly pass the value for that content prop :