reactjs - state and props are undefined

Question

Hi Im fairly new to coding. I am using react redux and created a store, reducers etc. I cant get anything to render to the screen and when I console.log this.props it comes up an empty array. The data Im dealing with is an array of objects I set the initialstate to an array of objects. I connected all the components with connect and mapstateto props function, there is an empty object in the first arguement of the connect and the second arguement is the componenet. When I look at my component tree it looks fine but my state is undefined and cant figure out why? Here is my code. Thank you in advance.

  export const FETCH_SMURFS_START ="FETCH__SMURFS_START"
export const FETCH_SMURFS_SUCCESS = "FETCH_SMURFS_SUCCESS"
export const FETCH_SMURFS_FAILURE ="FETCH_SMURFS_FAILURE"
export const ADD_SMURF_START = "ADD_SMURF_START"
export const ADD_SMURF_SUCCESS = "ADD_SMURF_SUCCESS"
export const ADD_SMURF_FAILURE = "ADD_SMURF_FAILURE"

export const getSmurfData = () =>dispatch=>{
         
    dispatch({type:FETCH_SMURFS_START})
        console.log(FETCH_SMURFS_START)
   axios.get(' http://localhost:3333/smurfs')
      .then((res)=>{
         console.log(res.data)
          dispatch({type:FETCH_SMURFS_SUCCESS, payload:res.datay})

      })
          
      .catch((err)=> {
          dispatch({type:FETCH_SMURFS_FAILURE, payload:err.message})
      })

}

export const putSmurfData = () =>dispatch=>{

    dispatch({type:ADD_SMURF_START})
        console.log(ADD_SMURF_START)
        dispatch({ADD_SMURF_SUCCESS})
   axios.put(' http://localhost:3333/smurfs')
      .then((res)=>{
          
          dispatch({type:ADD_SMURF_SUCCESS, payload:res.data})

      })
          
      .catch((err)=> {
          dispatch({type:ADD_SMURF_FAILURE, payload:err.message})
      })

}

class SmurfDisplay extends React.Component {
  componentDidMount() {
    getSmurfData();
  }

  render() {
    return (
        <>
      <div>
        {this.props.newSmurfData.map((smurf, index) => (
          <div>
            <h4 key={smurf.id}></h4>
            <p> {index}</p>
            <p>{smurf.description}</p>
            <p>{smurf.nickname}</p>
            <p>{smurf.name}</p>
            <p>{smurf.position}</p>
          </div>
        ))}
      </div>
      
      </>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    newSmurfData: [
      {
        error:state.error,
        id: state.id,
        name: state.name,
        position: state.position,
        nickname: state.nickname,
        description: state.description,
      },
    ],
  };
};

export default connect(mapStateToProps, {})(SmurfDisplay);
class Smurf extends React.Component {
    render() {
        console.log(this.props);
        return (
            <>
            
                  {this.props.smurfData.map(function(smurf,index) {
                      return(
                      
                <div>
                      <h4 key={index}></h4>
                      <p>{smurf.description}</p>
                      <p>{smurf.nickname}</p>               
                      <p>{smurf.name}</p>
                      <p>{smurf.position}</p>
                   
              </div>
                      )  
                  })}

                  
            
    </>
            
                  
        )
    }
}










const mapStateToProps = (state) =>{
    return{

        smurfData:[{
            error:state.error,
            id:state.id,
            name:state.name,
            position:state.position,
            nickname:state.nickname,
            description:state.description
        }]
    

    }
}
export default connect(mapStateToProps,{})(Smurf)
xport const initialState = {
        error:"",
        isLoading: false,
        smurfData : [{
            id:"",
            name:"",
            position:"",
            nickname:"",
            description:""

        }],

        error:"",
        isAddingSmurf:false,
        newSmurfData:[{
            id:"",
            name:"",
            position:"",
            nickname:"",
            description:""
        }],
     
        
        }
        




export const reducer = (state = initialState,action) =>{
                switch(action.type){
         case FETCH_SMURFS_START:
                  return{
                    ...state,
                    isLoading:true,
                    error:""
                }
        case FETCH_SMURFS_SUCCESS:
                return{
                    ...state,
                    isLoading:false,
                    smurfData:action.payload
                }
        case FETCH_SMURFS_FAILURE:
            return{
                ...state,
                isLoading:false,
                error:"there was an error getting your smurfs"
            }
                
        case ADD_SMURF_START:
            return{
                ...state,
                isAddingSmurf:false,
                error:""
            }
        case ADD_SMURF_SUCCESS:
            return{
                ...state,
                isAddingSmurf:true,
                error: "",
                newSmurfData:action.payload
            }
        case ADD_SMURF_FAILURE:
            return{
                ...state,
                isAddingSmurf:false,
                addingError:"Error"
            }
                    default:
                    return state



    }
}

export default reducer;

question from:https://stackoverflow.com/questions/65871932/state-and-props-are-undefined

Answer 1

when you want to use this.props in your class Component you need to use super(props) inside the constructor:

constructor(props){
   super(props)
}