REACT: Implement a feature to add a distinctive border around the currently selected image

Question

REACT: Implement a feature to add a distinctive border around the currently selected image

When selecting a picture, I would like to have a border around it. Specifically, if out of 6 pictures I choose 3, I want highlighted borders around those selected images. How can this be achieved? EDIT: I am utilizing React to address this issue.

javascript html css reactjs

Answer 1

Answer №1

If you're wondering how to manage state in your app, there are a few different approaches you can take. One example is demonstrated here, where the state is tracked in the parent component. In this setup, the parent App component monitors the state for each image, while an Image component determines whether to display a border based on a specific piece of the App state passed down as a prop. Check out the code for more insight. Another option would be to have the active state stored within each individual Image component.

This code showcases several interesting features, such as the use of various ES6 functionalities for brevity, React's immutability helper for updating the state array in a immutable manner, and lodash's times method for creating the initial state array.

Here's the code snippet (note that some of the indentation may have been lost in copying from jsfiddle):

function getImage() {
    return { active: false };
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { images: _.times(6, getImage) };
    this.clickImage = this.clickImage.bind(this);
  }
  clickImage(ix) {
    const images = React.addons.update(this.state.images, {
      [ix]: { $apply: x => ({ active: !x.active}) }
    })
    this.setState({ images });
  }
  render() {
    const { images } = this.state;
    return (
        <div>
        { images.map((image, ix) =>
            <Image
              key={ix}
              ix={ix}
              active={image.active}
              clickImage={this.clickImage} />) }
        </div>
    );
  }
};

class Image extends React.Component {
    render() {
    const { ix, clickImage, active } = this.props;
    const style = active ? { border: '1px solid #021a40' } : {};
    return <img
              style={style}
              src={`https://robohash.org/${ix}`}
              onClick={() => clickImage(ix)}/>;
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

Here's what the resulting interface looks like:

https://i.sstatic.net/bT12A.gif

Answer 2

If you're wondering how to manage state in your app, there are a few different approaches you can take. One example is demonstrated here, where the state is tracked in the parent component. In this setup, the parent App component monitors the state for each image, while an Image component determines whether to display a border based on a specific piece of the App state passed down as a prop. Check out the code for more insight. Another option would be to have the active state stored within each individual Image component.

This code showcases several interesting features, such as the use of various ES6 functionalities for brevity, React's immutability helper for updating the state array in a immutable manner, and lodash's times method for creating the initial state array.

Here's the code snippet (note that some of the indentation may have been lost in copying from jsfiddle):

function getImage() {
    return { active: false };
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { images: _.times(6, getImage) };
    this.clickImage = this.clickImage.bind(this);
  }
  clickImage(ix) {
    const images = React.addons.update(this.state.images, {
      [ix]: { $apply: x => ({ active: !x.active}) }
    })
    this.setState({ images });
  }
  render() {
    const { images } = this.state;
    return (
        <div>
        { images.map((image, ix) =>
            <Image
              key={ix}
              ix={ix}
              active={image.active}
              clickImage={this.clickImage} />) }
        </div>
    );
  }
};

class Image extends React.Component {
    render() {
    const { ix, clickImage, active } = this.props;
    const style = active ? { border: '1px solid #021a40' } : {};
    return <img
              style={style}
              src={`https://robohash.org/${ix}`}
              onClick={() => clickImage(ix)}/>;
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

Here's what the resulting interface looks like:

https://i.sstatic.net/bT12A.gif

Answer 3

Answer №2

To make an image selectable, you can add an event handler for the click event that toggles a "selected" class. Then, in your CSS, define the styles for the selected class to include a border.

.selectableImg {
  border: solid 1px transparent;
  margin: 10px;
}

.selectableImg.selected {
  border: solid 1px blue;
}

<img class="selectableImg"  src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>

<script>
  var images = document.querySelectorAll(".selectableImg");
  
  images.forEach(function(i) {i.addEventListener("click", function(event) {
    i.classList.toggle("selected");
    })});
  </script>

Answer 4

To make an image selectable, you can add an event handler for the click event that toggles a "selected" class. Then, in your CSS, define the styles for the selected class to include a border.

.selectableImg {
  border: solid 1px transparent;
  margin: 10px;
}

.selectableImg.selected {
  border: solid 1px blue;
}

<img class="selectableImg"  src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>

<script>
  var images = document.querySelectorAll(".selectableImg");
  
  images.forEach(function(i) {i.addEventListener("click", function(event) {
    i.classList.toggle("selected");
    })});
  </script>

REACT: Implement a feature to add a distinctive border around the currently selected image

Answer №1

Answer №2

Similar questions

Even when applying a class, the CSS link:hover style will only affect the initial occurrence

Ever since I switched to a different monitor, my Javascript has suddenly stopped functioning

CKFinder Error: Unable to find definition for t.event.special.swipe

Oops! Hardhat Test Error "Error: Virtual Machine Exception occurred while processing transaction: reverted with reason 'Please deposit additional funds'."

The end of the /if in the small template system fails to correctly detect the desired condition

Understanding intricate JSON structures with JavaScript

I need help configuring headers for the graphql server when using renderToString from react-dom/server. Can anyone provide guidance on

Do I have to include 'document.ready()' for this JavaScript code snippet?

"Exploring the power of Node.js Virtual Machines and the magic of

Unpredictable order of replies retrieved using $http.get

Utilizing an external SCSS or CSS file with Material UI in React: A step-by-step guide

Using jQuery to create dynamic CSS effects directly on the drop-down menu button

Show concealed elements above everything else

How to set the default value of a select dropdown in PHP

How can we reduce the size of a JSON object in Typescript before sending it to the client?

Sending a POST request to a Flask server using Stripe and AJAX

Unveiling the Mystery: Why YUI-3 Grids & Google Chrome Cause Overlapping Texts

The collapse button in Bootstrap 3.3 and jQuery 1.1 appears to be visible but unresponsive when clicked

Executing a cURL request using Node.js

What is the best way to handle JSON data in vue.js?