doggrid.js

import React from 'react';
import { Col, Row, Input} from 'antd';
import DogCard from './dogcard';
import { status, json } from '../utilities/requestHandlers';

class BlogGrid extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      search: {}
    }
  }
  

  componentDidMount() {
    fetch('https://melody-annex-3000.codio-box.uk/api/v1/dogs')
    .then(status)
    .then(json)
    .then(data=>{
      console.log(data)
      this.setState({posts:data})        
    })
    .catch(err => console.log("Error fetching dogs", err))

  }

  onSearch = value => {
    console.log(value)
    this.setState({search:value})
  } 

  render() {
    const { Search } = Input;
    
    if (!this.state.posts.length) {
      return <h3>Loading posts...</h3>
    }
    if(this.state.search.length){
      console.log(this.state.search)
      const cardList = this.state.posts.filter(dog=>dog.Name.toLowerCase() === this.state.search.toLowerCase() || dog.Breed.toLowerCase() === this.state.search.toLowerCase() || dog.Age === parseInt(this.state.search)).map(post => {
        return (
          <div style={{padding:"10px"}} key={post.ID}>
            <Col span={6}>
              <DogCard {...post} />
            </Col>
          </div>
        )
      });
      return (
        <div>
        <Search placeholder="input search text"
                          allowClear
                          enterButton="Search"
                          size="large"
                          onSearch={this.onSearch}/>
        <Row type="flex" justify="space-around">
          {cardList}
        </Row>
        </div>
      );
    }else{
       const cardList = this.state.posts.map(post => {
        return (
          <div style={{padding:"10px"}} key={post.ID}>
            <Col span={6}>
              <DogCard {...post} />
            </Col>
          </div>
        )
      });
      return (
        <div>
          <div style={{ padding: '2% 20%' }}>
            <Search placeholder="input search text"
                              allowClear
                              enterButton="Search"
                              size="large"
                              onSearch={this.onSearch}/>
          </div>
          <Row type="flex" justify="space-around">
            {cardList}
          </Row>
        </div>
      );
    }
  }
}

export default BlogGrid;