React calculator: CDN not recognising display ID

I don´t know what´s wrong with my code. Whenever I run the test cdn, it doesn´t recognise my display ID element as an…Well, element.

It’s because you have display as a separate component. Here your id=“display” is passing the prop of id with the value of display to the component Display.

Instead, in your Display component, wrap your output of value in an element with the id of display. Should fix it.

Thanks for the reply. You mean setting a variable to value and displaying that?

Also, display is the one receiving props from Calculator, not passing it.

Fixed it by passing the ID as a prop. Thanks!

Nope. So here you are calling your Display component from your calculator:

<Display id="display" value={this.state.value} />

but the id=“display” is setting the props of the display component to id=“display” not setting the html id to display.

To accomplish this, in your display component, you likely have something like:

<h2>{this.props.value}</h2>

change that to

<h2 id="display">{this.props.value}</h2>
1 Like

Yeah, I fixed it by passing the ID as a prop.

1 Like

I would highly caution doing that. It will work now, but if you ever changed the id from display to “display-calc” for example, you’d have to change it in two places or more, and that can cause errors if we mistype or forget.

If you’d rather, for simplicity, you could wrap your Display component call in a div and give that div the id of display.

Edit: Regardless, good job sticking with it and good luck!

1 Like