Changing the Parent div style based on checked radio input in Reactjs

As a Reactjs beginner, I am looking for assistance in changing the background color of a faculty item (.faculty) to red when the respective radio input is checked. This should be achieved using the onChange method in Reactjs. Thank you in advance for your help!

<div className="faculties">
 <div className='faculty '>
  <label htmlFor="faculty1">Science
   <input type="radio" id='faculty1' name="chooseFaculty" />
  </label>
</div>
<div className='faculty '>
  <label htmlFor="faculty2">Management
   <input type="radio" id='faculty2' name="chooseFaculty" />
  </label>
</div>

</div>

Answer №1

Are you interested in a setup similar to this example?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the size of CSS boxes based on the window dimensions

I am facing an issue with two divs placed side by side. They appear fine when the page is viewed in full-screen mode. However, upon resizing the window, the right div overlaps the left one and causes a messy layout. . -I want to prevent these boxes fro ...

Discovering the position of elements in relation to their (grand^N)parent

Among my possessions are elements A and B. B has the ability to exist as a direct child of A, or there may be anywhere from 0 to N elements separating them. It is imperative that I determine how B is situated in relation to A, specifically noting the dist ...

Avoiding the insertion of styles into the HEAD section when using Webpack MiniCssExtractPlugin in combination with Create React

Currently, I am utilizing create-react-app to develop a component library with Storybook JS. The ultimate goal is to release an NPM package containing these components for use in various projects. Within this library, SASS is employed, complete with global ...

Access Firestore documents within the NextJS 13 framework

As a newcomer to React/NextJS, I am working on fetching a list of documents from a Firestore Collection using NextJS 13 in a SSR Page so that I can display them below. Although I have successfully retrieved the documents within my function, the challenge ...

Placing a Div at One Third of the Height of the Viewport

Hello, I'm looking to enhance the appearance of my website using the rule of thirds. I have a tall div that I would like to position one-third of the way down from the top of the browser window viewport height. This is what I have tried so far, but ...

Implement dynamic CSS color selection based on server-side data

Introduction At our company, we manage a large client website in Optimizely (ASP.NET MVC) that hosts multiple smaller sites for different regions and important customers. Currently, our frontend team creates various themes using SASS to CSS conversion, w ...

Troubleshooting Z-Index problem with Material UI Drawer component on iOS

I'm currently working on a project that involves the use of the Material UI Drawer component. However, I've encountered a specific issue when using an iPad, which presents two main problems: - The overlay does not appear above the navigation bar ...

Why aren't the kittens loading in Next Js?

Following the guidance in the Next Js documentation, I created a next.config.js file to inform Next Js that I want to incorporate kittens into my app. The resource for the kittens can be found at: This is how the next.config.js file appears: module.expor ...

Avoid using the Router with the Search component in React JS

Having trouble rendering my Search component within the main Header component using react-router-dom. I suspect there's an issue with this line of code <Route render={({ history }) => } /> I've been stuck on this for two days now... T ...

Issues with Bootstrap Carousel Fade Transition and Button Controls inoperable

I am currently exploring the creation of a carousel on bootstrap that transitions smoothly between three images (specifically 3 'gorilla' jpgs). However, I am encountering some challenges while learning HTML. Challenge 1: The carousel is not tra ...

React components experiencing conflicts when using shorthand inline styles that overwrite one another

Within my React component, I am receiving a values object with attributes like: {gridColumn: '1 / 3', gridRow: '2 / 5', gridArea: 'header'} I apply these values to the component's style as follows: this.cell.style.setP ...

Tips for styling buttons in react-admin with custom CSS

I need some help with customizing buttons in react-admin. I am new to the platform and unsure about how to go about changing the button CSS for various actions such as create, edit, and export. Can anyone provide guidance on the best way to customize these ...

Ionic version 4 ion-img eagerly preloads images instead of implementing lazy-loading

I recently created a horizontal scroller using FlexLayoutModule. It allows me to display a horizontally scrollable list where each item consists of an image and text column. Here's the relevant snippet from my scroller.component.html: <div class=" ...

Unable to show inline form within a ul element

I had a ul list with regular text inside the li tag. When I attempted to show it inline, it worked perfectly. However, as soon as I replaced that text with a form, I could no longer get it to display inline. This was my HTML code: <ul class='tes ...

Both position absolute and position relative are failing to work effectively

Whenever I click on a div called "test", another div named "outside" appears, along with a div named "inside" that has a higher z-index. The problem arises when I try to set the position of "inside" to absolute, as I am unable to assign a margin-bottom. A ...

Discovering HTML attributes using part of the attribute's name

Can someone help me identify and remove all attributes in my HTML page that contain the word "data"? I want to clear out the values for these attributes. Any suggestions on how to achieve this? For instance, consider the following snippet from my HTML: & ...

The type 'Promise<UserCredential>' cannot be assigned to

import React, {createContext, useContext, useEffect, useState, ReactNode} from "react"; import { auth } from '../utils/init-firebase'; import { createUserWithEmailAndPassword } from "firebase/auth" type ButtonProps = { ch ...

Maintaining the scrolling behavior and preserving added class even after refreshing the page

I am facing an issue with an element on my page that adds a class when the user scrolls past a certain point and removes it when scrolling back up. The problem arises when I refresh the page after the class has been added, it doesn't persist until I s ...

Ways to include various inputs with chip

I am currently working on a project that involves implementing an email field using the chip component. However, I have encountered an issue where pasting multiple email values for the first time inserts them into the field successfully. But when I try to ...

Troubleshooting Loading Problems in React Native Using Geny Motion

Currently utilizing react native Using react-native-cli version 2.0.1 and react-native version 0.55.3 Execution was done through react-native run-android Encountering a perpetual loading screen while running the app in debugger mode, with 127.0.0.1:8081 ...