Uncaught TypeError: Cannot read property 'value' of null (React/JS/TS)

Question

I made a function that renders out a different backgroundColor depending on the value.

  const backgroundColorResolver = () => {
    allQuestions.map((aq) => {
      if (aq.averageAnswerValue <= 4) return "#EE7362";
      if (aq.averageAnswerValue > 4 && aq.averageAnswerValue < 7)
        return "#FDCF5B";
      return "#068466";
    });
  };

And under return in the tsx I do:

   <View style={questionAverageResultStyling.indexContainer}>
            {allQuestions.map(({ averageAnswerValue, key }) => (
              <View
                style={{
                  backgroundColor: `${backgroundColorResolver}`,
                  margin: "0.5",
                  width: "100%",
                  height: "25px",
                }}
              >
                <Text style={questionAverageResultStyling.indexText} key={key}>
                  {averageAnswerValue}
                </Text>
              </View>
            ))}
          </View>

However, I get error message "Cannot read property 'value' of null". Specifically in style={{ backgroundColor: ${backgroundColorResolver}} Does anyone know why and how to render out this function in style with the other styles (margin, width, height)? Let me know if information is missing and I will add it.

apasic · Accepted Answer · 2022-08-31 13:32:36Z

1

backgroundColorResolver is a function object. You are using it as a object that has a value, without actually calling the function. So, instead of:

backgroundColor: `${backgroundColorResolver}`

Put in:

backgroundColor: `${backgroundColorResolver()}`

Also, I'm not sure how the function reads the allQuestions variable. Maybe you should refactor that too.

edited Aug 31, 2022 at 13:32

answered Aug 31, 2022 at 13:30

apasic

1007 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot read property 'value' of null (React/JS/TS)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related