React not displaying data after successful fetch

Question

I'm new to React and trying to figure out what is going wrong with my current method of fetching and displaying data to a page.

I ran the backend request through Postman and it appears to work but for what ever reason that data isn't mapping to my state 'list' array. I've console logged the res and can see that data is being passed to this component but something is going wrong with the state 'list' mapping. Any help would be appreciated.

class Software extends Component {

    constructor(props){
        super(props)
        this.state = {
            list : []
        }
    }

    //when componenet is successfully called pull appropriate data
    componentDidMount(){
        this.getSoftware();
    }


    //set pulled data to the form of the list
    S_List = () => {
        return this.state.list.map((curr, index) => {
                return < itemlist list = {curr} key = {index} />
        })

    }


    //pull data from the DB
    getSoftware(){

        fetch(`http://localhost:5000/routes/software`) //need to complete queries 
            .then(res => res.json())
            .then(res => console.log(res)) //
            .then(list => this.setState({list}))
            .catch(err => console.log(err))

        //console.log(this.state);
    }

    

    render() {
        //console.log(this.state);
        return(
            <Fragment>
                <Link to="/">
                    <Navbar bg="dark" variant="dark">
                        <Navbar.Brand href="#home">Ninventory</Navbar.Brand>
                    </Navbar>
                </Link>
                <Jumbotron>
                    <h1>Software</h1>
                    <p>
                        This page holds software products like the latest games in the Nintendo library
                    </p>
                </Jumbotron>
                <Container bg = "#f72525">
                    <Table style = {{color:"#f72525"}} striped hover >
                        <p>contains place holders for now</p>
                        <br></br>

                        <thead>
                            <td>Product</td>
                            <td>Price</td>
                            <td>Release Date</td>
                        </thead>
                        <tbody>
                            {this.S_List()}
                        </tbody>
                    </Table>
                </Container>
                
            </Fragment> 

        )
    }


}

const itemlist = item => (
    <tr>
        <td>{item.list.s_prodName}</td>
        <td>{item.list.s_price}</td>
        <td>{item.list.s_releasedate}</td>
    </tr>
)

Answer 1

Change .then(res => console.log(res)) to .then(res => { console.log(res); return res; }. If the code you posted is accurate your console.log is eating your response object and then passing undefined to the next .then statement.

Answer 2

Within the S_List() method this.state.list is an array of objects. When you iterate over them you already pass down the list items:

// set pulled data to the form of the list
S_List = () => {
  return this.state.list.map((item, index) => {
    return <ItemList item={item} key={index} />;
  });
};

So the ItemList component receives these item objects as props and there is no list property there (if the image you posted is the fetched response):

const ItemList = ({item}) => (
  <tr>
    <td>{item.s_prodName}</td>
    <td>{item.s_price}</td>
    <td>{item.s_releasedate}</td>
  </tr>
);

And make sure you return res in the thenables:

.then(res => {
  console.log(res);
  return res;
})
.then(list => this.setState({list}))