CODEWITHSUNDEEP
reactjs
Maxwell Agyemang
Maxwell Agyemang

Reputation: 3

How do I get box-shadow attribute to work for ReactJS CSS file?

so I was following a tutorial from the freeCodeCamp YouTube channel for ReactJS regarding a project to create a Team Members allocation web app.

Now, I ran into a problem regarding using CSS and React to dynamically group selected members, by highlighting them in a black shadow when a specific group is selected from a drop down list.

From what I understand, an event handler called 'handleEmployeeCardClick' was created to handle selecting a specific team and highlighting all members of that team in a black shadow-box.

Below is the code for that:

function handleEmployeeCardClick(event) {
    const transformedEmployees = employees.map((employee) => employee.id === parseInt(event.currentTarget.id)
      ?(employee.teamName === selectedTeam)?{...employee, teamName:''}   
      :{...employee, teamName: selectedTeam}:employee);
    setEmployees(transformedEmployees);
  }

Also the section where the event handler is applied for the html looks like this:

 <div class="row justify-content-center mt-3 mb-3">
          <div class="col-8">
           <div class="card-collection">
              {
                employees.map((employee) => (
                  <div id={employee.id} className={(employee.teamName === selectedTeam ? 'card m-2 standout' : 'card m-2')} style={{ cursor: "pointer" }} onClick={handleEmployeeCardClick}>

                    {(employee.gender === 'male')?<img src={maleProfile} className="card-img-top"/>
                                                 :<img src={femaleProfile} className="card-img-top"/> }
                                                  
                    
                    <div className="card-body">
                      <h5 className="card-title">Full Name: {employee.fullName}</h5>
                      <p className="card-text"><b>Designation:</b>{employee.designation}</p>
                    </div>
                  </div>
                ))
              }
            </div>
        </div>
  </div>

And the CSS code that manipulates the 'css' file to create the dark shadow looks like this:

.standout{
  box-shadow: rgba(0,0,0,0.16) 0px 1px, 4px, rgb(51, 51, 51) 0px 0px 0px 3px; 
}

Everything looks fairly correct to me, however I am still not getting the desired output below:

enter image description here

A recreation of the problem is found here link

I am fairly new to React so please forgive me of any newbie errors that seem obvious, any help is greatly appreciated. Oh! and the name of the course is called [React JavaScript Framework - ProjectBased Course] by freeCodeCamp released on August 31st, 2022.

Upvotes: 0

Views: 295

Answers (1)

yoduh
yoduh

Reputation: 14689

You just have wrong syntax for the box-shadow. If you open dev console for the page and inspect the cards, they are receiving the standout class as expected, and the custom styling is there but it's crossed out because it's being reported as invalid card debug

You have an unnecessary comma between the pixel properties that needs to be removed:

.standout{
  box-shadow: rgba(0,0,0,0.16) 0px 1px, 4px, rgb(51, 51, 51) 0px 0px 0px 3px; 
}

Should be:

.standout{
  box-shadow: rgba(0,0,0,0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; 
}

Upvotes: 1

Related Questions