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

11

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