Condition on checkbox in React with Redux

Question

This is surely very simple but I dont understand how it works. I try to bind checkbox with state and with state display different string. It is in React with Redux. The code below (bold font)

container:

 class DropingList extends Component {
  **conditionHandler() {
    if(this.props.pet === 'cat'){
      return "YEAH!!!"
    }else {return null;}**
  }
  render() {
    return (
      <div>
        <AddHimHer
          click={this.props.onAddMan}
        />
      { this.props.pers.map(per =>(
        <NewPerson
          key={per.id}
          click={() => this.props.onManDown(per.id)}
          name={per.name}
          age={per.age}
          **animal={this.conditionHandler(this.props.pet)}**
        />
      ))
      }

      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    pers: state.persons
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onAddMan: (name,age,**pet**) => dispatch({type:actionTypes.ADD_MAN, data: {nam: name, ag: age, **superp: pet**}}),
    onManDown: (id) => dispatch({type:actionTypes.MAN_DOWN, Id: id})
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(DropingList);

component:

const NewPerson = (props) => (
  <div onClick={props.click}>
  <h1>Is {props.name} a SUPERHERO? ? ???</h1>
  <h2>He is {props.age} years old</h2>
  **<h1>{props.animal}</h1>**
  </div>
);

export default NewPerson;

reducer:

const initState = {
  persons: []
}

const personReducer = (state = initState,action) => {
  switch (action.type) {
    case actionTypes.ADD_MAN:
      const newMan = {
        id: Math.random(),
        name: action.data.nam,
        age: action.data.ag,
        **pet: action.data.superp**
      };
      return {
        ...state,
        persons: state.persons.concat(newMan)
      };
    case actionTypes.MAN_DOWN:
    return {
      ...state,
      persons: state.persons.filter(person => person.id !== action.Id)
    };
  }
  return state;
};

export default personReducer;

I am still newbe in React and Redux. I think I have ommited something. Could you tell me whats wrong with my code?

Mayank Shukla · Accepted Answer · 2018-05-09 07:24:30Z

1

Issue is pet is the part of the object (each object of the array), not a separate prop so you need to use per.pet in map callback function, like this:

{this.props.pers.map(per =>(
    <NewPerson
      key={per.id}
      click={() => this.props.onManDown(per.id)}
      name={per.name}
      age={per.age}
      animal={this.conditionHandler(per.pet)}       // here
    />
))}

Now you are passing the pet value to function conditionHandler, so no need to use this.props.pet inside that directly use pet, like this:

conditionHandler(pet) {
    if (pet === 'cat') {
      return "YEAH!!!"
    } else {
        return null;
    }
}

answered May 9, 2018 at 7:24

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Condition on checkbox in React with Redux

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related