1

I am using Redux for state management, my state is an array of objects. It looks like this: I do not care for it being an array, I just need the ability to display object values by a key since there are many objects and each needs to displayed in a specific area.

[{...},{...},{...},{...},etc..]

How can I best display values of a specific object by it's key?

Reducer:

const contextReducer = (state=null, action) => {
    switch(action.type){
        case 'CONTEXTUALIZE':
            state =  Object.values(action.payload)
            state = state.filter(o => (o === state[0] || o === state[3]))
            state = Object.assign(...state)
            state = Object.keys(state).map(key => ({[key]: state[key]}))
            console.log(state)
            return state
        default:
            return state
    }
}

export default contextReducer

My attempt:

const context = useSelector(state => state.contextReducer)

followed by {context} in the render method, but I get an error:

Objects are not valid as a React child (found: object with keys {LaserHost}). If you meant to render a collection of children, use an array instead.

I am able to instead use {context.toString()} but this just displays the entire array of the string 'object' and not the actual keys and values of each object in the array.

Render Method

export default function ContextPanel() {
  const classes = useStyles();
  const context = useSelector(state => state.contextReducer)on={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <div>
            <Typography className={classes.heading}>{context}</Typography>
          </div>
          <div className={classes.nameColumn}>
            <Typography className={classes.heading}>{context}</Typography>
          </div>
          <div>
            <Typography className={classes.heading}>{context}</Typography>
          </div>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography>
            {context}
          </Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>

Everywhere you see {context}, I intend to be able to access a value by a key of an object. I do not actually want to display all of {context}. This is just a placeholder for now.

Alex
  • 486
  • 1
  • 7
  • 19
  • Can you add the code in render method? Looks like you are trying to display the array in the render method without mapping through them, which you cannot do with objects or arrays. – Praneeth Paruchuri Sep 09 '19 at 18:23
  • @paruchuri-p yes i will do this now. I do not understand how to implement the mapping since the array of objects i have state are each for a different part of the page. – Alex Sep 09 '19 at 18:26
  • Just follow this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map – Praneeth Paruchuri Sep 09 '19 at 18:27
  • It looks like your mixing Redux reducers and selectors. They do not have the same responsibility. Reducers handle actions and shouldn't be used outside of the store. [Selectors are meant to extract a piece of data from the state.](https://stackoverflow.com/q/38674200/1218980) – Emile Bergeron Sep 09 '19 at 18:28
  • @EmileBergeron I kind of understand what you are saying and have read through that post, however, I'm still a bit confused as to how I'm supposed to implement this. My current selector is just getting all the data from state, the idea behind this was so I can access individual items from the state as a whole. – Alex Sep 09 '19 at 18:35
  • It is unclear what you're trying to do right now and the code snippet you provided is incomplete and has invalid syntax. – Emile Bergeron Sep 09 '19 at 19:16

0 Answers0