How to set style for map item in react js

Question

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.

You need to do something like this - stackoverflow.com/questions/69012531/… — Shyam
– Shyam, Commented Sep 1, 2021 at 12:48

Harshit Rastogi · Accepted Answer · 2021-09-01 12:53:57Z

1

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>

answered Sep 1, 2021 at 12:53

Harshit Rastogi

2,1521 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shyam Over a year ago

The downside with this approach is if i have 100 cards ,and if i change the style of card - 1 all the 100 cards will re-render . An ideal solution for these scenarios is to move the card and the state to its own component . Since each card has its own state now selecting card 1 will re-render only card 1.

RABI · Accepted Answer · 2021-09-01 13:02:55Z

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

Collectives™ on Stack Overflow

How to set style for map item in react js

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related