How to treat values that comes in this.props in React

Asked

Viewed 51 times

0

I have a Semaphore component that calls the Light component 3 times each with its parameter

<div className="compSemaforo">
    <Luz color="red" />
    <Luz color="yellow" />
    <Luz color="green" />
</div>

how I can at the root of the Light component identify what the class value is and add a specific class for each of the calls?

Rebound that always the 3 components <Luz /> will be rendered each with a specific class that will change your background and I’ve tried to use map and it didn’t work

javascript react

  • It is not very clear what you are trying to do. What is this class you are mentioning? The property color would be that class? And why are you using the method map to generate a static JSX?

  • Is there a way you can illustrate with your code, and why you need to identify? Is there a process you want to do? Maybe the Light component just needs to change the color (I’m almost understanding)?

  • I am doing a sefamofo where there is the class Semaforo which is the one I put up and this class calls the Light Component which is just a component called 3 times to represent each color of the semaphore I am passing color="red" to is identifying what your color will be with this I am trying to receive this value in the Light Jam and thus perform the treatment to add the right color as background of the element

  • Show your code and you want to keep changing colors?

  • Please add the code of your Light component to make it clearer what the problem is!

1 answer

0

Inside your Light component, Voce can use the classname attribute to add the desired class, as below:

const Luz = (props) => {
    return (
      <div className="compLuz {props.color}">
        ...
      </div>
    );
}

And then set colors by CSS:

.compLuz.red { background-color: red; }
.compLuz.yellow { background-color: yellow; }
.compLuz.green { background-color: green; }

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.