Code Pen Page Rendering

1

I am experiencing an issue with CodePen where I have written code for both the App and Random components in the JavaScript text editor, but I am not seeing the page rendered on the UI. How can I resolve this?

2

are you using the render method?

3

Nop, I am using a function component that returns

4

you need to write the code that says to the engine what to render and wherem you need to use ReactDom.render()

5 
ReactDOM.render(<App />, document.getElementById("app"));

I have the App component that is the parent of child component Random. My UI shows blank page

6

oh, so you have it!
but you need to write in there the name of the component, not JSX

7

I am passing the prop to a child component, can I share the code with you?
this is my html code <div id="app"></div>

const App = () => {
  const [bodyBackgroundColors, setBodyBackgroundColors] = useState('#0d6efd');

  const getRandomColor = () => {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i += 1) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  };

  const changeColor = () => {
    const randomColor = getRandomColor();
    setBodyBackgroundColors(randomColor);
  };

  useEffect(() => {
    document.body.style.transition = 'background-color 0.5s';
    document.body.style.color = bodyBackgroundColors;
    document.body.style.backgroundColor = bodyBackgroundColors;
    const icons = document.querySelectorAll('.fa-brands');
    icons.forEach((icon) => {
      // eslint-disable-next-line no-param-reassign
      icon.style.color = bodyBackgroundColors;
    });
  }, [bodyBackgroundColors]);

  return (
    <>
      <Random
        changeColors={changeColor}
        bodyBackgroundColors={bodyBackgroundColors}
      />
    </>
  );
};
ReactDOM.render(<App />, document.getElementById("app"));

that is the App component.

8

have you fixed the render method?

yes, you can share the code

9

I shared the code above, please check, I also send the Random component code.

// Random App
import React, { useEffect, useState } from "https://esm.sh/react";
const Random = (props) => {
  const quotes = [
    {
      text: 'If you do what you’ve always done, you’ll get what you’ve always gotten.',
      author: '-Tony Robbins',
    },
    {
      text: 'You can’t use up creativity. The more you use, the more you have.',
      author: '-Maya Angelou',
    },
    {
      text: 'It is never too late to be what you might have been.',
      author: '-George Eliot',
    },
    {
      text: 'Dream big and dare to fail.',
      author: '-Norman Vaughan',
    },
    {
      text: 'You miss 100% of the shots you don’t take.',
      author: '-Wayne Gretzky',
    },
    {
      text: 'When I stand before God at the end of my life, I would hope that I would not have a single bit of talent left and could say, I used everything you gave me.',
      author: '-Erma Bombeck',
    },
    {
      text: 'I have learned over the years that when one’s mind is made up, this diminishes fear.',
      author: '-Rosa Parks',
    },
    {
      text: 'Life is not measured by the number of breaths we take, but by the moments that take our breath away.',
      author: '-Maya Angelou',
    },
    {
      text: 'The question isn’t who is going to let me; it’s who is going to stop me.',
      author: '-Ayn Rand',
    },
  ];
  const quoteList = Math.floor(Math.random() * quotes.length);
  const selectedQuote = quotes[quoteList];
  const { changeColors, bodyBackgroundColors } = props;
  useEffect(() => {
    $('#new-quote').click(() => {
      $('#text').fadeIn(400, () => {
        $('#text').text(selectedQuote.text).fadeIn();
      });
    });
  }, [selectedQuote]);
  return (
    <>
      <section id="quote-box">
        <div id="text-quote">
          <i className="fa fa-quote-left" aria-hidden="true" />
          <p id="text">{selectedQuote.text}</p>
          <p id="author">{selectedQuote.author}</p>
        </div>
        <div id="aside">
          <div id="icons">
            <a href="twitter.com/intent/tweet" id="tweet-quote" target="_blank" aria-label="Tweet this quote">
              <i className="fa-brands fa-square-twitter" />
            </a>
            <i className="fa-brands fa-square-tumblr" />
          </div>
          <button
            id="new-quote"
            type="button"
            onClick={() => {
              changeColors();
            }}
            style={{
              backgroundColor: bodyBackgroundColors,
              transition: 'background-color 0.5s',
              color: '#fff',
            }}
          >
            New quotes
          </button>
        </div>
      </section>
      <footer>
        <p className="author-text">By Newton</p>
      </footer>
    </>
  );
};
Random.propTypes = {
  changeColors: PropTypes.func.isRequired,
  bodyBackgroundColors: PropTypes.string.isRequired,
};
10

this is your first error, this doesn’t work if you don’t fix it, you can’t use JSX here, you just need the component name