can't access property from object

class EventEdit extends Component {

  constructor(props) {
    super(props);

    const { skillsets, events } = this.props;

    this.state = {
      skillsets : skillsets,
      events : events
    }
  }

  componentWillMount(){
    this.props.getSkillset();
    this.props.getEvent();
  }

  componentWillReceiveProps(props){
    this.setState({
        skillsets : props.skillsets,
        events : props.events,
  })
  }

  render() {
   console.log(this.state.events) //it returns the object perfectly
   console.log(this.state.events.title) //it says cannot read title of undefine
    )
  }
}

const mapStateToProps = (state, ownProps) => {
    let id = ownProps.match.params.event_id;
    return {
      skillsets: state.skillset.skillsets,
      events: state.event.events.find(event => event._id === id)
    }
  }

const mapDispatchToProps = dispatch => {
  return {
    getSkillset: () => { dispatch(getSkillset()) },
    getEvent: () => { dispatch(getEvent()) },
    

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

so, I successfully get a list of data from API using action redux and display it in my component. Then I want to edit an item of the array data, I get the id and filter it. Actually every property is show in console, but I can't display each property in jsxenter image description here

1 answer

  • answered 2019-04-15 06:34 Chirag

    You are dispatching the two actions back to back and that's calling the render method multiple times when getting the props filled. You should follow proper component life cycle methods and avoid component rendering until you have response available for both the actions.