Pfthb

I am trying to find a solution to using setState on mapped items inside componentDidMount.

I am using GraphQL along with Gatsby with many data items returned but require that on specific pathname is === to slug the state is updated in the component to the matching littleHotelierId.

propertyInit = () => 
 const pathname = location.pathname;
 return (
 <StaticQuery
 query=graphql`
 query 
 allContentfulProperties 
 edges 
 node 
 id
 slug
 information 
 littleHotelierId
 
 
 
 
 
 `
 render=data => 
 data.allContentfulProperties.edges.map(( node: property ) => 
 if (pathname === property.slug) 
 !this.isCancelled &&
 this.setState(
 littleHotelierId: property.information.littleHotelierId
 );
 
 return null;
 );
 
 />
 );
;

Then I am pulling this into componentDidMount as

componentDidMount() 
 this.propertyInit();

not relevant but as reference this.isCancelled = true; is added to componentWillUnmount.

I don't receive any errors but if I console.log(littleHotelierId) I get nothing.

I did at first think that it may be because return is null so tried giving the map a const and returning as

render=data => 
 data.allContentfulProperties.edges.map(( node: property ) => 
 if (pathname === property.slug) 
 const littleHotelier =
 !this.isCancelled &&
 this.setState(
 littleHotelierId: property.information.littleHotelierId
 );
 return littleHotelier;
 
 );

but this was unsuccessful too.

The Goal is for componentDidMount to map items returned in the GraphQL data as

componentDidMount() 
 if (path1 === '/path-slug1') 
 !this.isCancelled &&
 this.setState(
 littleHotelierId: 'path-id-1'
 );
 
 if (path2 === '/path-slug2') 
 !this.isCancelled &&
 this.setState(
 littleHotelierId: 'path-id-2'
 );
 
 ... // other items

I think the issue is that GraphQL is fetching data as asynchronous and this request not completed as componentDidMount() is called. If I console.log the data it is not returning anything to the console. How can I fix this?

I think you need to create some filtered data as a result of a map function. After you have filtered data you do setState(data: data). It is not good to do multiple setState.

If your GraphQL returns promise then you can write something like the following:

componentDidMount() 
 this.fetchData()
 .then(data => 
 const filteredData = data.filter(element => 
 element.someProperty === propertyValue
 );
 this.setState( data: filteredData );
 )