CODEWITHSUNDEEP
reactjs
Boris Civcic
Boris Civcic

Reputation: 110

How to add props to state

I have a problem when trying to add my redux array to a component’s state:

componentDidMount() {
  this.props.cardAction()
  this.setState({ showCards: this.props.cardAction() })
}

hhhhhh undefined console log undefined

Here’s my dashboard code:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import Header from '../../common/Header/'
import Masonry from '../../common/Masonry/'
import { cardAction } from '../../store/actions/Cards'
import Arrow_Down from '../../assets/img/arrow-down.svg'

class Dashboard extends Component {

  componentDidMount() {
    this.props.cardAction()
    this.setState({ showCards: this.props.cardAction() })
  }
  constructor(props) {
    super(props)
    this.state = {
      collapsed: true,
      class: 'collapsed',
      showCards: {},
    }
    this.toggleCollapse = this.toggleCollapse.bind(this);
  }

  toggleCollapse(i, info) {
    console.log('i', info, 'iiiii', i)
    this.setState({
      collapsed: !this.state.collapsed,
      class: this.state.collapsed ? '' : 'collapsed',
      showCards: info
    }, () => {
      // my state is updated here !


      console.log('cardsss', this.state.showCards)
    })
    if (this.state.showCards === 'active') {
      let carddd = this.state.showCards
      this.setState({
        showCards: {
          ...this.state.showCards,
          open: 'inactive'
        }
      });
    }
    else {
      this.setState({
        showCards: {
          ...this.state.showCards,
          open: 'active'
        }
      });
    }
  }

  render() {
    console.log('hhhhhh', this.state.showCards)
    const cardList = this.props.Cards.map((info, i) => {
      return (
        <div className={(info.open === 'active') ? 'collapsed' : ''} key={i}>
          <div className={(info.open === 'active') ? 'header flex space-between active' : 'header flex space-between'}>
            <h2>{info.title}</h2>
            <span onClick={() => { this.toggleCollapse(i, info) }}><img src={Arrow_Down} alt='Arrow' /></span>
          </div>
          <div className='content'>
            <p>{info.description}</p>
          </div>
        </div>
      )
    })
    return (
      <div>
        <Header />
        <Masonry columns={3} gap={20}>
          {cardList}
        </Masonry>
      </div>
    )
  }
}

Dashboard.defaultProps = {
  columns: 2,
  gap: 20,
  Cards: []
}
Dashboard.propTypes = {
  Cards: PropTypes.array.isRequired,
}

const mapStateToProps = state => {
  return { Cards: state.cards.result }
}

const mapDispatchToProps = dispatch => ({
  cardAction: () => dispatch(cardAction())
})
export default connect(mapStateToProps, mapDispatchToProps)(Dashboard)

Upvotes: 0

Views: 91

Answers (1)

Isaac
Isaac

Reputation: 12874

this.props.cardAction() is a redux action, it's not meant for you to directly assign to state, reason is redux action will return to reducer, not component. You should remove the setState in componentDidMount

componentDidMount() {
    this.props.cardAction();
  }

When you invoked this.props.cardAction(), it will call the function that defined in redux action file, and the result will be available at this.props.Cards as you mentioned above

const mapStateToProps = state => {
  return { Cards: state.cards.result }
}

Upvotes: 2

Related Questions