Why does my program not return anything

JavaScript
1

I’m trying to pass the ‘author’ state in my author component, but it doesn’t work. Why?
and what can i do to fix this?
A Pen by Dylan (codepen.io)

2

It seems the problem is in the setState call in the random function.
Check what is your initial state and what you are passing in the setState call.

3

Firstly, you don’t need this line in your code:

ReactDOM.render(<Author/>,document.getElementById('author'));

This is rendered as a child component of FirstQuote. Your parent component should be rendered at the very bottom of your code, so move the ReactDOM.render for that one below all other code.

You’ll notice that your app will render successfully if you change one more thing:

In your Author component, this line is breaking your code:

<h1>{props.author}</h1>

If you change the content of this element to a random string (e.g. ‘hello’), your app will render.

Do you know why trying to pass state as props isn’t working like this? You’re missing one word.

4

I would suggest you take some time and learn more about React.

  • The render method should render the root component to a single root element in the HTML. The root component will render all the child components.

  • If you want to set state when the app initially renders use componentDidMount (i.e. setting the initial quote).

  • You are not using this in the Author component for the props. I don’t know what gh' is supposed to be.

  • There are data and functions in the constructor that do not belong inside the constructor. All you need is the state and the bindings. You can add the quotes array to this (e.g. this.quotes = []) but as it is a static data structure it might as well be declared outside the component.

  • There is duplicate code which only seems to serve as a way to rename identifiers (variable names) and deal with the incorrect use of scopes. These issues are not a React specific problem.

5

Good morning ! Thank you very much for your advice, I made my parent component at the very end and now my code is working. Thank you!

6

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