How do I toggle components in my react application

So I have this project :
There is an Editor pane and a previewer pane. I want these pane to behave differently when a red dot (upper right) on the panes are clicked one at a time. I want it in such a way that if I click the red button on the upper right of the editor pane the previewer should be hidden and if I click the red button on the upper right of the previewer pane the editor should be hidden. So far what I have in the codepen is what I have so far. and it’s not working yet. Suggestions from other folks has not helped and besides I am new to react so it may take a while before I understand where anyone is driving at. However I am here for someone to help out and pull me along while explaining what I need to do. The link to the project is below:

There are two ways to do this:

  1. A general way (not specific to React): alter the CSS display property. You would need to conditionally change this value and then render the component with that CSS. (Not ideal for this situation, but it’s how you would “grey-out” an inactive component without making it disappear.)
  2. A React-specific way: do or do not render a component on the basis of props or (as in your case,) state.

This was covered in the curriculum, but it’s more like a textbook - read once, and come back to it many times as you actually work the problems: (From the React section):

I’d recommend re-reading at least the first four sections, and then pick which of the three ways of conditional rendering you prefer for this situation. I’m an old-school programmer first blooded on C, so I love boolean logic, and would use the second way (AND), but since they are all semantically equivalent, pick the syntax that works for your brain.

Thanks. I have already resolved to go back to the curriculum but I’m kinda confused on what I need to focus. But now that I have it I will gladly check it out asap.

1 Like