Prop I can access in component can't be rendered - reactjs

Question

My MERN app's purpose is to take a 3-digit input from a user and return the first prime number that contains those digits (ex: you enter 026, the app returns 10267). If my checker() function finds a match, I run updatePrimeNumber() to update that prime number's "match" variable to true. Database is updating properly.
I want to display all prime numbers that have "match" equal to true. I have a prop, primeNumbers, which contains all the primes I have entered into the database. I can access those numbers throughout my component, but I can not figure out how to render any of them, true or not. The error I receive is that primeNumbers is not defined.
import React, { Component } from 'react';
import gql from "graphql-tag";
import { graphql, compose } from 'react-apollo';
const PrimeNumbersQuery = gql`
{
primeNumbers {
id
text
match
}
}
`;
const UpdateMutuation = gql`
mutation($id: ID!, $match: Boolean!) {
updatePrimeNumber(id: $id, match: $match)
}
`;
class Prime extends Component {
checker = (primes) => {
let nums = this.props.checkedNumbersFromParent;
let recentChecked = (nums[nums.length - 1].text);
let recentCheckedRegExp = new RegExp(recentChecked);
for (var i in primes) {
let count = 0;
if (primes[i].text.search(recentCheckedRegExp) >= 0 && count < 1) {
this.updatePrimeNumber(primes[i]);
count = count + 1;
break;
}
}
return primes;
}
updatePrimeNumber = async (primeNumber) => {
await this.props.updatePrimeNumber({
variables: {
id: primeNumber.id,
match: primeNumber.match
},
update: store => {
const data = store.readQuery({ query: PrimeNumbersQuery });
data.primeNumbers = data.primeNumbers.map(
x =>
x.id === primeNumber.id
? {
...primeNumber, match: true
}
: x
);
store.writeQuery({ query: PrimeNumbersQuery, data });
}
});
};
render() {
const {data: {loading, primeNumbers}} = this.props;
this.checker(primeNumbers)
return (
<div>
***Need to render all primeNumbers with match === true***
</div>
);
}
}
export default compose(
graphql(UpdateMutuation, {name: 'updatePrimeNumber'}),
graphql(PrimeNumbersQuery)
)(Prime);
Thank you to anyone who looks at this. It is much appreciated.

Answer 1

About your problem:primeNumbers is not defined.UpdatePrimeNumber is async, you need to check it first and add constructor to initial this.props.
constructor(){
super(props)
}
renderprime(){
this.checker(this.props.data.primeNumbers)
if (this.props.data.primeNumbers){
return (
<div>
{this.props.data.primeNumbers.map((item) => {
if (item.match){
return (
<div>
<div>{item.id}</div>
<div>{item.text}</div>
</div>
)
}
})}
</div>
)
}
}
...
<div>
{this.renderprime()}
</div>

Answer 2

which line is the error being thrown from ?
You can try using the filter instead of updating the match in the primeNumber.
to render the prime numbers replace
Need to render all primeNumbers with match === true
loop through the primeNumbers