TypeError: Cannot read property 'url' of undefined

JavaScript
1

Hi there, I’m getting a TypeError: Cannot read property 'url' of undefined error when trying to render images in one of my components. I’m very new to Next/React, am I doing something wrong?

Here is my code

import axios from 'axios';
import Link from 'next/link';

export default class Grid extends React.Component {
  state = {
    mods: [
    ]
  }

  componentDidMount() {
    axios.get(`http://localhost:1337/mods`)
      .then(res => {
        
        const mods = res.data;
        this.setState({ mods });
      })
      .catch(error => {
        console.log(response) // console logging error message
      });
  }

  render() {
    return (
      <div className="row">
      
      <div className="container">
          <h4 className="border-bottom pb-3 mb-4">Mods</h4>
      </div>
        { this.state.mods.map(mod => 
        <div className="col-lg-2 col-md-3 col-sm-6 col-6" key={mod.id}>
         <div className="list-item slick-item r list-hover mb-3">
        <div className="media text-hover-primary">
          <span className="media-content"></span> 
         
          <div className="media-action media-action-overlay">
            <div className="row">

            **<img src={mod.image.url} />**  

           
  
              <div className="w-100 text-center mt-2 h-1x">
              Mod's Meta Properties
              </div>
  
              <div className="w-100 text-center mt-4">
              <Link as={`/mods/${mod.id}`} href={`/mods/${mod.id}`}>
                    <a className="btn btn-sm btn-outline-light btn-rounded mx-3">View</a>
                    </Link>
           
              </div>
            </div>
          </div>
        </div>
        <div className="list-content text-center">
          <div className="list-body">
               <Link as={`/mods/${mod.id}`} href={`/mods/${mod.id}`}>
                    <a className="list-title title">{mod.brand}</a>
                    </Link>   <Link as={`/mods/${mod.id}`} href={`/mods/${mod.id}`}>
                    <a className="list-title title">{mod.model} {mod.type}</a>
                    
                    </Link>
                    

          </div>
        </div>
        </div>

        </div>)}
      </div>
    )
  }
}```
1 Like
2

1} Add proxy to packge.json file
"`proxy":"http://localhost/1337" then just restart server.
2) axios.get(/mods)
.then(res=>res.json())
then((json)=>this,setState({
mods:json
})

3

Hi! @mattcohen did that fix your issue? I’m having that message quasi randomly, i.e the first axios.post() works but the second one doesnt