I want to be able to create a border around the image color that I have onclick so the user knows that they have clicked on it. How do I do that?

This is how I want it to be as you can see there is border around it onselect and it stays on.

.text-image-list-image {
  height: 40px;
  width: 40px;
  border-radius: 4px;
  margin-left: 15px;
  margin-right: 15px;  
}

.text-image-list-title {
  margin-bottom: 6px !important;
}



  return (
    <div>
      <Title name={name} />
      {content.map(({ src, content, value }, index) => (
        <div key={index} style={{ display: "inline-block", cursor: "pointer"}} onClick={ () => setCurrentSelection(value)}>
          <p>{content}</p>
          <a><img className="text-image-list-image" src={src} alt="" /></a>
        </div>
      ))}
    </div>
  );

CodePudding user response：

You could do it via a new class like so.

<div className={currentSelection === value ? "with_border" : "no_border"} key={index} style={{ display: "inline-block", cursor: "pointer"}} onClick={ () => setCurrentSelection(value)}..... 

Your css class would be something like

.with_border{
   border: 2px solid grey;
}