John
John

Reputation: 17

React Styled Component doesn't show correct output

I've changed my style in StyledButton tag but it doesn't reflect on webpage. Can you help what is wrong in this code

   import React, { Component } from 'react';
    import './App.css';
    //import Radium, {StyleRoot} from 'radium';
    import Person from './Person/Person';
    import { render } from 'react-dom';
    import styled from 'styled-components'

const StyledButton = styled.button `
background-color:  ${props => props.alt ? 'red' : 'green'};   //Here I have define these property which is not reflecting in output
color: white;
font: inherit;
border: 1px solid blue;
padding: 8px;
cursor:pointer;
&:hover:{
  background-color:${props => props.alt ? 'salmon' : 'green'}; //Hover Function is also not working
  color:black;
}`;

class App extends Component {
state ={
  persons : [
{id:'12', name: 'Max', age: 28},
{id:'21', name: 'Manu', age:29},
{id:'33', name: 'Nikhil', age:23}
]};
nameChangeHandler = (event, id) => {
  const personIndex = this.state.persons.findIndex(p=>{
    return p.id===id;
  });

  const person = {
    ... this.state.persons[personIndex]
  };

  person.name = event.target.value;
  const persons =[...this.state.persons];
  persons[personIndex]=person;

  this.setState({ persons: persons
});
}

deletePersonHandler = (personIndex) =>{
  //const persons = this.state.persons.slice();
  //const persons = this.state.persons
  const persons = [... this.state.persons];
  persons.splice(personIndex,1);
  this.setState({persons: persons})
}

togglePersonsHandler = ()=> {
  const doesShow = this.state.showPersons;
  this.setState({showPersons: !doesShow});
}

render()
{
  let persons = null;
    if(this.state.showPersons)
      {
      persons = (
        <div>
        { this.state.persons.map((person, index) =>{
          return <Person
           click = { () => this.deletePersonHandler(index) }
           name={person.name}
           age={person.age}
           key= {person.id}
           changed={(event)=> this.nameChangeHandler(event, person.id)}/>
        })}
    </div>
    );
    //StyledButton.backgroundColor= 'red';

      }

let classes = []
if(this.state.persons.length<=2)
{
  classes.push('red');
}
if(this.state.persons.length<=1)
{
  classes.push('bold');
}

  return (

    <div className = "App">
      <h1>Hi there this is my first react application</h1>
      <p className= {classes.join(' ')}>Hi this is really working</p>
      <StyledButton
       alt ={ this.state.showPersons }
       onClick = {this.togglePersonsHandler}>Toggle Persons</StyledButton>
       { persons }


    </div>


  );

}
}

export default App;

Code just toggle the names and ages when user click on button and delete the names when click on the paragraph and adding certain classes these are all works fine.

I'm using styled component package on toggle button and it is not working properly, I don't why Please let me know if you understand

Upvotes: 0

Views: 867

Answers (1)

Drew Reese
Drew Reese

Reputation: 203051

You've defined alt to be a transient prop, i.e. $alt, but you don't pass that prop to the StyledButton.

You've also a typo in your hover selector, there's a trailing colon (:): &:hover: should be :hover (the leading parent node selector & is also unnecessary).

const StyledButton = styled.button `
  background-color: ${props => props.$alt ? 'red' : 'green'};
  color: white;
  font: inherit;
  border: 1px solid blue;
  padding: 8px;
  cursor: pointer;
  :hover {
    background-color:${props => props.$alt ? 'salmon' : 'green'}; 
    color:black;
  }
`;

...

<StyledButton
  $alt={this.state.showPersons} // <-- pass transient prop
  onClick={this.togglePersonsHandler}
>
  Toggle Persons
</StyledButton>

This was introduced in v5.1. If you didn't intend to declare a transient prop or you aren't on v5.1 or newer, then simply remove the $ and use the alt prop.

const StyledButton = styled.button `
  background-color: ${props => props.alt ? 'red' : 'green'};
  color: white;
  font: inherit;
  border: 1px solid blue;
  padding: 8px;
  cursor: pointer;
  :hover {
    background-color:${props => props.alt ? 'salmon' : 'green'}; 
    color:black;
  }
}`;

...

<StyledButton
  alt={this.state.showPersons} // <-- use alt prop
  onClick={this.togglePersonsHandler}
>
  Toggle Persons
</StyledButton>

Demo

Edit react-styled-component-doesnt-show-correct-output/

Upvotes: 1

Related Questions