CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxmapbox
Dom
Dom

Reputation: 11

Redux mapStateToProps is not working in my mapbox map

I am struggling to pull the user data out of my Redux state and into my mapbox component.

I just want to display the current user information in the map however I'm consistently getting this error:

./src/app/views/map/BasicMap.jsx Line 293:22: 'user' is not defined no-undef

Here is code from my BasicMap.jsx file:

// Trying to get user info from redux store
import { connect } from "react-redux";


const BasicMap = () => {

  // Use redux store to get user info

  const mapState = (state) => ({
    user: state.USER_SET_DATA.user.displayName,
  });
  
  
  
  return (
    <ReactMapGL
      {...viewport}
      mapStyle="mapbox://styles/veleter/ck7xdy1yo1bkj1ipmsbhe9c96"
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      onViewportChange={setViewport}
      onClick={addMarker}
    >
    
    
                <Popup
              key={userMarker.id + Math.random}
              latitude={userMarker.lat}
              longitude={userMarker.long}
              closeButton={true}
              closeOnClick={false}
              dynamicPosition={true}
              onClose={() =>
                setShowUserPopup({
                  ...showUserPopup,
                  [userMarker.id]: false,
                })
              }
              anchor="top"
            >
              <div className="popup">
                <h1>{user}</h1>
                <LogEntryForm location={userMarker} />
              </div>
            </Popup>

I have removed some of the code you don't need to see. I have also tried:

  const mapState = (state) => ({
    user: state.user,
  });

From my application

There is the redux tool and USER_SET_DATA is passing in the user info.

How can I access the user data from the state and use it in a H1 in my map app? "mapState is declared but never read"

Thanks for any help!

Upvotes: 0

Views: 54

Answers (1)

Konstantin Modin
Konstantin Modin

Reputation: 1333

It should be like this:

const BasicMap = ({ user }) => {
  ...
}

const mapState = (state) => ({
   user: state.user 
});

export default connect(mapState)(BasicMap)

Upvotes: 1

Related Questions