React state updating but not rendering on child component

Tayler Hughes

I know the state is updating because 1. the 'Loading...' is going away, I can console log this.state.images to see the array. However when the state updates and the loading goes the searchbar shows up but the Card's within CardList do not.

They do show up when I search for a correct string, but not before.

If I pass this.state.images to CardList they show up perfectly. However when I move to the filteredImages they only show up when filtered.

Any ideas? Thanks in advance.

class App extends Component {

  constructor() {
    super();
    this.state = {
      images:[],
      searchfield: ''
    }
  }

  getLabels = (image) => {
    const AuthKey = key.key;
    const res = axios.post(`https://vision.googleapis.com/v1/images:annotate?key=${AuthKey}`, {
      requests: [
        {
          image:{
            source:{
              imageUri: `http://storage.googleapis.com/${image}`
            }
          },
          features:[
            {
              type:"LABEL_DETECTION",
              maxResults:10
            }
          ]
        }
      ]
    });

    res.then(function (response) {
      const results = response.data.responses[0].labelAnnotations;
      const ex = results.map(result => {
        return result.description;
      }); 
      return ex;
    });

    return res;

  };

  componentDidMount() {
      imageFiles.imageFiles.forEach(img => {
        this.getLabels(img).then(result => {
          const results = result.data.responses[0].labelAnnotations;
          const labels = results.map(result => {
          return result.description;
        });
        //Add new values to the state 
        this.setState({images:[...this.state.images, {img, labels}]});
      });
    })
  }

  onSearchChange = (event) => {
    this.setState({searchfield: event.target.value});
  }

  render() {
    const filteredImages = this.state.images.filter(image => {
      return image.labels.includes(this.state.searchfield.toLowerCase());
    });
    // Create an array of objects to store the image path and the labels detected from Google Vision
    if (this.state.images.length === 0) {
      return <h1>Loading...</h1>
    } else {
      return (
        <Grid className="App">
          <SearchBox searchChange={this.onSearchChange}/>
          <CardList images={filteredImages} />
        </Grid>
      )}
  }

}

export default App;

Manoj

 class App extends Component {

      constructor() {
        super();
        this.state = {
          images:[],
          searchfield: '',
          filteredImages:[]
        }
      }

      getLabels = (image) => {
        const AuthKey = key.key;
        const res = axios.post(`https://vision.googleapis.com/v1/images:annotate?key=${AuthKey}`, {
          requests: [
            {
              image:{
                source:{
                  imageUri: `http://storage.googleapis.com/${image}`
                }
              },
              features:[
                {
                  type:"LABEL_DETECTION",
                  maxResults:10
                }
              ]
            }
          ]
        });

        res.then(function (response) {
          const results = response.data.responses[0].labelAnnotations;
          const ex = results.map(result => {
            return result.description;
          }); 
          return ex;
        });

        return res;

      };

      componentDidMount() {
          imageFiles.imageFiles.forEach(img => {
            this.getLabels(img).then(result => {
              const results = result.data.responses[0].labelAnnotations;
              const labels = results.map(result => {
              return result.description;
            });
            //Add new values to the state 
            this.setState({images:[...this.state.images, {img, labels}]});
this.setState({filteredImages:[...this.state.images, {img, labels}]});
          });
        })
      }

      onSearchChange = (event) => {
        this.setState({searchfield: event.target.value});
        let filteredImages = this.state.images.filter(image => {
            return image.labels.includes(this.state.searchfield.toLowerCase());
          });
        this.setState({filteredImages});
      }

      render() {

        // Create an array of objects to store the image path and the labels detected from Google Vision
        if (this.state.images.length === 0) {
          return <h1>Loading...</h1>
        } else {
          return (
            <Grid className="App">
              <SearchBox searchChange={this.onSearchChange}/>
              <CardList images={this.state.filteredImages} />
            </Grid>
          )}
      }

    }

    export default App;

Collected from the Internet

Please contact [email protected] to delete if infringement.