Assign the class name of the clicked div to another specific div

Question

Assign the class name of the clicked div to another specific div

I am working on a function component where I want to append a class name to a specific div when a user clicks on one of 4 different divs. The divs are named note_b, note_g, note_p, and note_y.

Below is the code snippet that I have so far:

import React from 'react-dom';
import DraggableCore from 'react-draggable';

function Note(props) {
    return (
        <DraggableCore defaultPosition={{x: 1000, y: 200}}>
            <div className={"note " + }>
                <div id="note_head">
                    <div id="note_bin"></div>
                    <div className="note_b" onClick={}></div>
                    <div className="note_p" onClick={}></div>
                    <div className="note_g" onClick={}></div>
                    <div className="note_y" onClick={}></div>
                    <div id="note_exit"></div>
                </div>
                <p>
                    {props.message}
                </p>
            </div>
        </DraggableCore>
    )
}

export default Note;

javascript html css reactjs

Answer 1

Answer №1

Big thanks to @Andy for the guidance! After revisiting state hooks, I managed to come up with the following solution:

import React, { useState }  from 'react';
import DraggableCore from 'react-draggable';

function NoteComponent(props) {
    const [background, setBackground] = useState('note_bg_b');

    return (
        <DraggableCore defaultPosition={{x: 1000, y: 200}}>
            <div className={"note " + background}>
                <div id="note_head">
                    <div id="note_bin"></div>
                    <div className="note_b" onClick={() => setBackground('note_b')}></div>
                    <div className="note_p" onClick={() => setBackground('note_b')}></div>
                    <div className="note_g" onClick={() => setBackground('note_b')}></div>
                    <div className="note_y" onClick={() => setBackground('note_b')}></div>
                    <div id="note_exit"></div>
                </div>
                <p>
                    {props.message}
                </p>
            </div>
        </DraggableCore>
    )
}

export default NoteComponent;

A cleaner and more efficient approach might exist for this task. Nevertheless, the current implementation is fully functional.

Answer 2

Big thanks to @Andy for the guidance! After revisiting state hooks, I managed to come up with the following solution:

import React, { useState }  from 'react';
import DraggableCore from 'react-draggable';

function NoteComponent(props) {
    const [background, setBackground] = useState('note_bg_b');

    return (
        <DraggableCore defaultPosition={{x: 1000, y: 200}}>
            <div className={"note " + background}>
                <div id="note_head">
                    <div id="note_bin"></div>
                    <div className="note_b" onClick={() => setBackground('note_b')}></div>
                    <div className="note_p" onClick={() => setBackground('note_b')}></div>
                    <div className="note_g" onClick={() => setBackground('note_b')}></div>
                    <div className="note_y" onClick={() => setBackground('note_b')}></div>
                    <div id="note_exit"></div>
                </div>
                <p>
                    {props.message}
                </p>
            </div>
        </DraggableCore>
    )
}

export default NoteComponent;

A cleaner and more efficient approach might exist for this task. Nevertheless, the current implementation is fully functional.

Answer 3

Answer №2

Implement the onClick event handler for each of the four divs and assign the clicked className to the note div.

UPDATE for another query: To avoid removing the added className when clicking inside the note div, utilize an event listener to determine the origin of the click. If it doesn't originate from an element with the classes note_b, note_p, note_g, or note_y, then do not remove the className.

import React, { useState, useRef } from 'react';
import DraggableCore from 'react-draggable';

function Note(props) {
    const [className, setClassName] = useState('');
    const noteDiv = useRef(null);

    const handleClick = e => {
        setClassName(e.target.className);
    }

    //This function prevents the default event action from occurring when the page is unloaded. 
    //If the target element of the event does not have one of the specified class names, it removes the class from the element with the class "note".    
    const handleUnload = e => {
        e.preventDefault();
        const noteDiv = document.querySelector('.note');
        if (!['.note', 'note_b', 'note_p', 'note_g', 'note_y'].includes(e.target.className)) {
            noteDiv.classList.remove(e.target.className);
        }
    }

    return (
        <DraggableCore defaultPosition={{ x: 1000, y: 200 }}>
            <div ref={noteDiv} className={`note ${className}`} onClick={handleUnload}>
                <div id="note_head">
                    <div id="note_bin"></div>
                    <div className="note_b" onClick={handleClick}></div>
                    <div className="note_p" onClick={handleClick}></div>
                    <div className="note_g" onClick={handleClick}></div>
                    <div className="note_y" onClick={handleClick}></div>
                    <div id="note_exit"></div>
                </div>
                <p>
                    {props.message}
                </p>
            </div>
        </DraggableCore>
    )
}

export default Note;

Answer 4

Implement the onClick event handler for each of the four divs and assign the clicked className to the note div.

UPDATE for another query: To avoid removing the added className when clicking inside the note div, utilize an event listener to determine the origin of the click. If it doesn't originate from an element with the classes note_b, note_p, note_g, or note_y, then do not remove the className.

import React, { useState, useRef } from 'react';
import DraggableCore from 'react-draggable';

function Note(props) {
    const [className, setClassName] = useState('');
    const noteDiv = useRef(null);

    const handleClick = e => {
        setClassName(e.target.className);
    }

    //This function prevents the default event action from occurring when the page is unloaded. 
    //If the target element of the event does not have one of the specified class names, it removes the class from the element with the class "note".    
    const handleUnload = e => {
        e.preventDefault();
        const noteDiv = document.querySelector('.note');
        if (!['.note', 'note_b', 'note_p', 'note_g', 'note_y'].includes(e.target.className)) {
            noteDiv.classList.remove(e.target.className);
        }
    }

    return (
        <DraggableCore defaultPosition={{ x: 1000, y: 200 }}>
            <div ref={noteDiv} className={`note ${className}`} onClick={handleUnload}>
                <div id="note_head">
                    <div id="note_bin"></div>
                    <div className="note_b" onClick={handleClick}></div>
                    <div className="note_p" onClick={handleClick}></div>
                    <div className="note_g" onClick={handleClick}></div>
                    <div className="note_y" onClick={handleClick}></div>
                    <div id="note_exit"></div>
                </div>
                <p>
                    {props.message}
                </p>
            </div>
        </DraggableCore>
    )
}

export default Note;

Answer 5

Answer №3

If you want to improve your class organization and enhance the identification of each note, consider incorporating data attributes for each note.

Instead of using a className like node_b, opt for two separate classes: note b. The class "note" can serve as a general identifier for all notes, while "b" can specify a particular note. Different colors can be used to differentiate between them clearly.

By adding the data attribute, you make it simpler to distinguish each note within the code. This enables you to extract the note id from the dataset of the clicked element in the click handler, set the state accordingly, and utilize that state in the parent element.

Note: To implement event delegation, only one click handler is employed on the container element of the notes.

const { useState } = React;

function Note({ message }) {

  // Initialize a new state to store the note id
  const [ noteClass, setNoteClass ] = useState('');

  // The handler checks if the clicked element is a "note" element,
  // extracts the note id from the element's dataset, and sets the state accordingly
  function handleClick(e) {
    if (e.target.matches('.note')) {
      const { note } = e.target.dataset;
      setNoteClass(note);
    }
  }

  // When the state changes, the containing element's class also updates      
  return (
    <div className={noteClass}>
      <div id="note_head">
        <div id="note_bin" onClick={handleClick}>
          <div data-note="b" className="note b">B</div>
          <div data-note="p" className="note p">P</div>
          <div data-note="g" className="note g">G</div>
          <div data-note="y" className="note y">Y</div>
        </div>
        <p>{message}</p>
      </div>
    </div>
  );

}

ReactDOM.render(
  <Note message="Message" />,
  document.getElementById('react')
);

.note { padding: 0.25em; border: 1px solid #4444; }
.note:not(:last-child) { margin-bottom: 0.25em; }
.note:hover { background-color: #fffff0; cursor: pointer; }
.b { color: red; }
.p { color: blue; }
.g { color: green; }
.y { color: gray; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 6

If you want to improve your class organization and enhance the identification of each note, consider incorporating data attributes for each note.

Instead of using a className like node_b, opt for two separate classes: note b. The class "note" can serve as a general identifier for all notes, while "b" can specify a particular note. Different colors can be used to differentiate between them clearly.

By adding the data attribute, you make it simpler to distinguish each note within the code. This enables you to extract the note id from the dataset of the clicked element in the click handler, set the state accordingly, and utilize that state in the parent element.

Note: To implement event delegation, only one click handler is employed on the container element of the notes.

const { useState } = React;

function Note({ message }) {

  // Initialize a new state to store the note id
  const [ noteClass, setNoteClass ] = useState('');

  // The handler checks if the clicked element is a "note" element,
  // extracts the note id from the element's dataset, and sets the state accordingly
  function handleClick(e) {
    if (e.target.matches('.note')) {
      const { note } = e.target.dataset;
      setNoteClass(note);
    }
  }

  // When the state changes, the containing element's class also updates      
  return (
    <div className={noteClass}>
      <div id="note_head">
        <div id="note_bin" onClick={handleClick}>
          <div data-note="b" className="note b">B</div>
          <div data-note="p" className="note p">P</div>
          <div data-note="g" className="note g">G</div>
          <div data-note="y" className="note y">Y</div>
        </div>
        <p>{message}</p>
      </div>
    </div>
  );

}

ReactDOM.render(
  <Note message="Message" />,
  document.getElementById('react')
);

.note { padding: 0.25em; border: 1px solid #4444; }
.note:not(:last-child) { margin-bottom: 0.25em; }
.note:hover { background-color: #fffff0; cursor: pointer; }
.b { color: red; }
.p { color: blue; }
.g { color: green; }
.y { color: gray; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Assign the class name of the clicked div to another specific div

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble setting up my Vuex store from localStorage for authentication in Nuxt

React conditional rendering with IF-ELSE allows for dynamic content loading on the page

Coldfusion: The Troubles of an Empty Link href="#" Error

Having trouble with my Angular application, seems to be stuck at the loading screen. Not sure what's causing it, possibly

The menu field remains open even after clicking on the menu

EmberJS: Learning how to create a record with a belongsTo relationship

Modify only unprocessed text within the HTML content

Electron experiences a crash while attempting to execute an HTTPS request within an addeventlistener callback function

Using a React button to sort through an array

Editing input within a Bootstrap 4 popover causes it to lose focus

Utilizing jQuery to configure multiple selection options within OptGroup elements

Loading HTML content in a WPF WebBrowser without encountering security messages

AngularJS uses variables defined by using curly braces like {{"message"}}

To utilize this.<module> within a Nuxt plugin, simply access it

Struggling with continuously re-rendering a color background when using useMemo in React?

Obtaining the innerHTML value using JavaScript in an Asp.net Core 5 View

Load charts.js synchronously into a div using XMLHttpRequest

Utilizing jQuery for animating SVG elements with dynamic color changes and scaling effects upon hover

Do you have any tips on designing a mobile-friendly navigation bar?

Switching Languages in react-simple-keyboard: Explained