What is the best way to retrieve an element that has been altered in its state?

Question

What is the best way to retrieve an element that has been altered in its state?

I encountered a scenario where I want an image to have a border when clicked, and if clicked again, the border should be removed. However, the border should also be removed if another image is clicked instead.

I believe there are a couple of approaches to tackle this issue, but I am unsure how to actually implement them:

Resetting borders for all images
Maintaining previous state to identify the element

I am utilizing states that are passed down from ancestors, so I may not be able to share all the scripts - I'll attempt to provide snippets instead.

The images: using 'next/image'

    return(
        <div key={attr} id={attrprops.attrChoice+':'+attr}>
        <Image
            src={imgSourceUrl}
            alt={attrprops.alt}
            width={attrprops.w}
            height={attrprops.h}

            onClick={()=>{  attrprops.setButtonClick(!attrprops.buttonClick);
                            attrprops.setBorder(attrprops.selectedAttr==attr ? false : true);
                            attrprops.setSelectedAttr(attr);
                        }}
        />
        <br></br>
        <div className='flex justify-center align-center'>{attr}</div>
        </div>
    );

State change logic:

useEffect(()=>{
    if (border&&buttonClick){
        document.getElementById(`body_type:${selectedAttr}`).className = 'border-2 border-blue-500';
        publishprops.setAttrNumber(4);
    }
    else if (!border&&buttonClick){
        document.getElementById(`body_type:${selectedAttr}`).className = 'border:none';
        publishprops.setAttrNumber(2);
    }
},[border])

Currently, only selected images receive borders. Unsure about the best approach to follow for achieving the desired functionality...

javascript reactjs next.js

Answer 1

Answer №1

To effectively utilize React, it is essential to adjust your mindset regarding state management. Your code should be easy to read and understand the intent behind it.

From what I see, your example appears to be quite simple. It's either showing a highlighted image or none at all.

Here is a more straightforward example you can consider:

import React, { useState } from 'react';

const images = [
    '1.png',
    '2.png',
    '3.png',
    '4.png',
    '5.png',
];

const MyComponent = () => {
    const [selectedImage, setSelectedImage] = useState(null);

    return (
        <ul>
            {images.map(src => (
                <img
                    key={src}
                    className={`
                        my-image
                        ${selectedImage === src ? 'active' : ''}
                    `}
                    onClick={() => setSelectedImage(
                        selectedImage => (
                            selectedImage !== src
                            ? src
                            : null
                        )
                    )}
                />
            ))}
        </ul>
    );
};

When selectedImage is null, it means no image has been clicked. Upon clicking, we either set it as the clicked image or revert it back to null if the same image is clicked again. The border styling is applied using the active class in CSS:

.my-image {
    border: 5px solid transparent;
}

.my-image.active {
    border-color: red;
}

Answer 2

To effectively utilize React, it is essential to adjust your mindset regarding state management. Your code should be easy to read and understand the intent behind it.

From what I see, your example appears to be quite simple. It's either showing a highlighted image or none at all.

Here is a more straightforward example you can consider:

import React, { useState } from 'react';

const images = [
    '1.png',
    '2.png',
    '3.png',
    '4.png',
    '5.png',
];

const MyComponent = () => {
    const [selectedImage, setSelectedImage] = useState(null);

    return (
        <ul>
            {images.map(src => (
                <img
                    key={src}
                    className={`
                        my-image
                        ${selectedImage === src ? 'active' : ''}
                    `}
                    onClick={() => setSelectedImage(
                        selectedImage => (
                            selectedImage !== src
                            ? src
                            : null
                        )
                    )}
                />
            ))}
        </ul>
    );
};

When selectedImage is null, it means no image has been clicked. Upon clicking, we either set it as the clicked image or revert it back to null if the same image is clicked again. The border styling is applied using the active class in CSS:

.my-image {
    border: 5px solid transparent;
}

.my-image.active {
    border-color: red;
}

What is the best way to retrieve an element that has been altered in its state?

Answer №1

Similar questions

What steps are involved in bundling a Node project into a single file?

Parameter for Ajax URL

The routing in NextJS takes into account both the forward slash (/) and the encoded forward slash (%

What is the process to alter the IconComponent of a NativeSelect based on whether it is open or closed?

How to Create a Custom Callback Function for jQuery's .html

Next js is throwing an error because it cannot accept objects as a React child. Instead, it found an error message stating "Response not successful: Received status code 401."

The React Router Dom V6 triggers loaders as soon as the router is initialized

Tips for preserving changes made to a jQuery script when the page is reloaded

Inject additional information following user authentication

A React component enclosed within a useCallback function

How to retrieve the value from an editable td within a table using Jquery

Error functions in Angular HTTP Interceptor are not being triggered

Having trouble with $addToSet and $push not working in updates using Mongoose with MongoDB in Node.js?

"Embracing Micro-frontends: Building dynamic web applications using a variety of frontend

What is the best way to eliminate query parameters in NextJS?

Bypass the typical practice of choosing input with javascript

Optional parameters in Sammy.js

Using the splice() method to remove an item from an array may cause unexpected results in React applications

Is there a way to update a JSON key using the "onchange" function in React?

TypeError: The function cannot be performed on the value of 0 in the Array.from