Q:

TypeError: this.state.screams. is not a function react js with fire base

this is my code
please anybody help me to solve this problem 
import React, { Component } from 'react'
import Grid from '@material-ui/core/Grid';
import axios from 'axios';
class home extends Component {

    state = {
        screams:null
    }

   //screams: [] also not working 

    componentDidMount(){
        axios.get('/screams')
        .then(res =>{
            this.setState({
                screams: res.data
            })
        })
        .catch(err =>{
            console.log(err)
        })
    }

    render() {
        let recentScreams = this.state.screams ? (
            this.state.screams.map(scream => <p>{scream.body}</p>)
        ) : <p>loading ....</p>
        return ( 
            <Grid container spacing={16}>
                <Grid item sm={8} xs={12}>
                   {recentScreams}
                </Grid>
                <Grid item sm={4} xs={6}>
                    <p>profile ....</p>
                </Grid>
            </Grid>
        )
    }
}

export default home;

error is 

TypeError: this.state.screams.map is not a function

 19 | }
  20 | 
  21 | render() {
> 22 |     let recentScreams = this.state.screams ? (
     | ^  23 |         this.state.screams.map(scream => <p>{scream.body}</p>)
  24 |     ) : <p>loading ....</p>
  25 |     return ( 

i refer this question answer before post this questions here 
1.React JS - Uncaught TypeError: this.props.data.map is not a function
2.TypeError: this.state.patients.map is not a function
3.ReactJS: TypeError: this.state.data.map is not a function
4.Uncaught TypeError: s.map is not a function in ReactJs
5.React .map is not a function
this is my api/screams results 
{
    "scream": [
        {
            "screamId": "1WRwEClETpvWRyPADUKh",
            "body": "hello all welcome to my site",
            "userHandle": "image",
            "createAt": "2019-07-25T05:39:52.099Z",
            "userImage": "https://firebasestorage.googleapis.com/v0/b/demoapp-c1dab.appspot.com/o/no-img-test.png?alt=media"
        },
        {
            "screamId": "csFCMA4wY3NXuKpZAVr8",
            "body": "oops everything working pass 7",
            "userHandle": "newapi",
            "createAt": "2019-07-22T07:21:32.964Z"
        },
        {
            "screamId": "Kit3XcAEFu8DWOE4IoXJ",
            "body": "hello world from no token",
            "userHandle": "Ghost",
            "createAt": "2019-07-21T17:00:00.091Z"
        }
    ]
}

A:

Your variable will be set to null before fetching the data, leading to your error on the first rendering.
Try setting your variable to an empty array first :
state = {
    screams: []
}

Just saw the data you fetched. I think you need to get the array that is into your JSON response :
this.setState({
    screams: res.data.scream
})

Instead of :
this.setState({
    screams: res.data
})

