CODEWITHSUNDEEP
javascriptreactjs
Pranav
Pranav

Reputation: 1646

Getting error 'TypeError: Cannot read property 'id' of undefined' on browser refresh

In my portfolio project, when clicked on project image it redirects to a new page giving details of that particular project which works without any flaw, but, when browser is refreshed, it gives error as mentioned above in title. What may be the cause?

Project.js (Here Project Card is created)

{  
        data2.map((data, index) => {
          return <MDBCol key={index}>
          <MDBCard style={{ width: "20rem"}}>
          <Link to={{ pathname: `/details/${data.id}`, data:data }}>
          <MDBCardImage className="img-fluid" src={data.img}/>
          </Link>
          </MDBCard>
          <br/>
          </MDBCol>
        })
      }

Details.js (When clicked on project image redirects to this page)

export default class Details extends Component {
    render() {
        const { data } = this.props.location;
        return (
            <Layout fixedHeader>
            <div className="details-body" key={data.id}>
                <h2 className="details-title">{data.title}</h2>
                <img src={data.img}/>
            </div>         
            </Layout>      
        )
    }
}

The error it gives is as below. What possible changes could be made? enter image description here

Upvotes: 1

Views: 932

Answers (5)

akhtarvahid
akhtarvahid

Reputation: 9769

Here is the solution to keep maintaining your data on refreshing page.

Details.js

 export default class Details extends Component {
  state = {
    data: this.props.location.data ? this.props.location.data:JSON.parse(localStorage.getItem('object'))
  }
  componentDidMount() {
    if(this.props.location.data!==undefined)
    localStorage.setItem("object", JSON.stringify(this.props.location.data));
  }
  render() {
    const {data} =this.state;
    let title = data ? data.title : "";
    let img = data ? data.img : "";
    let id = data ? data.id :0;
    return (
      <Layout fixedHeader>
        <div className="details-body" key={id}>
           <h2 className="details-title">{title}</h2>
           <img src={img} alt="detail-img" />
        </div>         
    </Layout> 
    );
  }
}

Upvotes: 1

Mohammad Ameer
Mohammad Ameer

Reputation: 79

this because you send the data with Link but when you refresh the data will go the way I get around this is to make Link direct me to something like projects/${id} then I get my data in the detail page

Upvotes: 0

Beginner
Beginner

Reputation: 9095

When you refresh the pushed data wont be there.

First Way

So either you can add all the required details in the url, like how search in redbus works you will be able to see since the params is in the url it will be easy to refresh.

Second Way

So either you can put details in the url if data is more, putting in url is not good, else you can check whether data is there in the component, if its not there with the id you can fetch the data.

Third Way

Since you are using react router, you can do this.props.history.push and add the state .

this.props.history.push({
          pathname : '/Taskactive',
          state :{
          role_id : responseJson.userFormat,
          userName : this.userName,
          userid: this.refs.usrname.value
          }
          } 
        );

and in the component you can fetch like this 

this.props.location.state.role_id

Either you can pass all the data or the required data like id and get all required data. The above approach data will be there even though after refresh, and you need to clean up when it unmounts

I hope you got a clear view on the problem

Upvotes: 0

Mohammad
Mohammad

Reputation: 127

In your details page add this code

     Export default class Details extends Component {
     render() {
         const { data } = this.props.location;
         return (
            {data && 
             <Layout fixedHeader>
             <div className="details-body" key={data.id}>
                 <h2 className="details-title">{data.title}</h2>
                 <img src={data.img}/>
             </div>         
             </Layout> 
                   }     
               )
              }
            }

Upvotes: 0

henok
henok

Reputation: 894

Thats because you are sending a data object using Link but when the browser is refreshed that data object is not there anymore since Link is not responsible for providing it with one.

either put all your required data in the url or store it inside localStorage

Upvotes: 0

Related Questions