Create Two Bulbs in React JS

How can you create two bulbs with React JS and change their color on button click?

Follow the steps below to create two bulbs and toggle their color (red or green) in React JS:

1. Create an App.js file.
2. In App.js file, create a parent component called `Bulbs`.
3. In the `Bulbs` component, create a child component called `Bulb`.
4. In `Bulb` component, create a button with `onClick` attribute to change the bulb color.
5. Pass the state (red/green) as props to the `Bulb` component.
6. Render two instances of the `Bulb` component inside the `Bulbs` component.
7. Toggle the state of the bulb on button click.

Answer:

Creating two interactive bulbs with React JS involves setting up a parent component to manage the bulb states and a child component to display each individual bulb. By passing the bulb color as a prop and updating it on button click, we can achieve the desired behavior.

When working with React JS to create components such as bulbs that can change their appearance based on user interaction, it's essential to understand how to structure the components and manage state effectively.

Firstly, we create an App.js file that serves as the main entry point for our React application. Within this file, we define a parent component called `Bulbs` that will hold the state of the bulbs. This component will be responsible for rendering two instances of the child component `Bulb`.

The `Bulb` component is where we define the visual representation of a single bulb. By accepting props such as `bulbColor` and `changeColor`, we can dynamically update the color of the bulb when the button is clicked. The `bulbColor` prop determines whether the bulb appears red or green, while the `changeColor` function allows us to toggle between the two colors.

Implementing the logic to toggle the bulb color involves updating the state of the bulbs within the parent component `Bulbs` in response to the button click event. By passing the appropriate props to each instance of the `Bulb` component and handling the state change accordingly, we can achieve the desired behavior of switching between red and green bulbs.