CODEWITHSUNDEEP
javascripthtmlcssreactjs
nenejaw
nenejaw

Reputation: 23

How to set style for map item in react js

I am new to reactjs. I have an array that will be

const mediumNames = ["TAMIL Medium", "ENGLISH MEDIUM"]

I have generated two cards using this code:

const [selectedMediumColor, setSelectedMediumColor] = useState('')

<div>
    {mediumNames.map((text, index,) => (

    <Card style={{ border: selectedMediumColor }} onClick={() => onClickMedium(text,index)} >
        <div >
            <img className={classes.imginCardBoard} src={TNlogo}></img>
                <Typography className={classes.textinCardBoard} > { text} </Typography>
        </div>
    </Card>
    ))}
</div>

I want to set Border Color when clicking Cards in ReactJS. If the user selects the first card, the border color should be blue and the next card border color should be white and vice versa.

Here's the Function Code I wrote:

 const onClickMedium = (medium,indexno) => {
        console.log(medium)
        console.log(indexno)

        if (medium === "TAMIL Medium") {
            
            selectedMediumColor('2px solid #00adb5')
        }
        else {
            selectedMediumColor('')

        }
    }

it is setting the color for both cards. Here's the Image: enter image description here

I want the color to be set for one card only. How can I achieve this? Please Help me with some solutions.

Upvotes: 2

Views: 4744

Answers (2)

RABI
RABI

Reputation: 732

As @Harshit's answer, it is an approach to achieve the result. But it could be extended as follows to handle more than 2 medium in your case as follows

export default function App() {
  const mediumNames = ["TAMIL Medium", "ENGLISH MEDIUM"];
  const mediumBorder = ["2px solid #00adb5", "2px solid red"];

  const [selectedMedium, setSelectedMedium] = useState("");
  const [selectedMediumIndex, setSelectedMediumIndex] = useState("");

  const onClickMedium = (medium, indexno) => {
    setSelectedMedium(medium);
    setSelectedMediumIndex(indexno);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        {mediumNames.map((text, index) => (
          <div
            style={{
              border:
                selectedMedium === text ? mediumBorder[selectedMediumIndex] : ""
            }}
            onClick={() => onClickMedium(text, index)}
          >
            <div>test</div>
          </div>
        ))}
      </div>
    </div>
  );
}

In this way you can handle any number of medium with custom border style for each medium.

CodeSandbox

Upvotes: 1

Harshit Rastogi
Harshit Rastogi

Reputation: 2122

You can try this approach where you can set the selected index:

const [selectedIndex, setSelectedIndex] = useState('')

 <div>
    {mediumNames.map((text, index,) => (

    <Card style={{ border: index === selectedIndex ? '2px solid #00adb5' : 'none'}} onClick={() => setSelectedIndex(index)} >
        <div >
            <img className={classes.imginCardBoard} src={TNlogo}></img>
                <Typography className={classes.textinCardBoard} > { text} </Typography>
        </div>
    </Card>
    ))}
</div>

Upvotes: 1

Related Questions