CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Nicholas Domenichini
Nicholas Domenichini

Reputation: 870

React-redux not picking up state when recursively rendering components

I am facing an issue where a component Question is not correctly receiving data from my react-redux store. When the component is initially rendered, it receives the desired data from the store with no issue. The problem arises when the question becomes a sub-question - when this is the case, the data from the store is not retrieved and is instead undefined, despite it being the same code. The sub-question code can be seen below where it renders a new Question component within the same Question component. This recursively rendered component does not receive the correct state.

The initial render code snippet is as follows, placed in an outside component from Question:

<div style={{ paddingRight: '8px' }}>
  {data.Question.map(question => (
    <Question question={question} key={question.ID} />
  ))}
</div>

The Question component is as follows:

import React from 'react';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import FlexibleInput from '../Inputs/FlexibleInput';
import {checkConditionals} from '../../dataHelper';
import { connect } from 'react-redux';

const mapStateToProps = (state, ownProps) => {
  return {
    answers: state.answers,
    activeStep: state.stepper
  }
}

const mapDispatchToProps = { }

class Question extends React.Component {
  getStyle = () => {
    if (this.props.subQuestion) return {paddingLeft: '24px', paddingRight: '-12px'}
    return {}
  }

  render() {
    const question = this.props.question;

    console.log(this.props.activeStep, question.ID, this.props.answers);

    return (
      <React.Fragment>
        {checkConditionals(question, this.props.answers) ? (
          <div style={this.getStyle()}>
            {/*Grid is used to placed the question and the possible answers on the same line*/}
            <Grid container spacing={2}>
              <Grid item> {/*Grid item for the question's prompt*/}
                <Typography style={{padding: '12px', fontSize: '1rem'}}>
                  {question.Description}
                </Typography>
              </Grid>
              <Grid item> {/*Grid item for the question's answer options*/}
                <FlexibleInput obj={question}/>
              </Grid>
            </Grid>

            {/*Display a question's sub-questions if they exist, mapping each sub question in the array to a new section*/
              question.SubQuestion ? (  
              question.SubQuestion.map(subQuestion => (
                <Question question={subQuestion} key={subQuestion.ID} subQuestion={true}/>
              ))
            ) : (
              <React.Fragment></React.Fragment>
            ) }
          </div>
        ) : (
          <React.Fragment></React.Fragment>
        )}
      </React.Fragment>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Question);

Upvotes: 2

Views: 172

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 84922

Question, on its own, does not have access to the store. By using connect you create a new component, and that component has access to the store. You do use connect at the end of the file, and you export the connected component, so as far as the rest of your codebase is concerned everything is fine. But inside this particular file, any references to <Question> are referring to the unconnected component.

Perhaps do this:


class Question extends React.Component {
  // ... later, in render
  question.SubQuestion.map(subQuestion => (
    <ConnectedQuestion question={subQuestion} key={subQuestion.ID} subQuestion={true}/>
  ))
}

const ConnectedQuestion = connect(
  mapStateToProps,
  mapDispatchToProps
)(Question);

export default ConnectedQuestion;

Upvotes: 4

Related Questions