Reactjs rerender component after CRUD Operation

Question

I am building a login in with MongoDB as my database hosted on heroku. I want to change the value of my component after updating the property of my loggedin user in my DB.

This is my function which updates the "Credits" of my user:

//ProgressMobileStepper.js

updateCredits() {
      fetch('https://mighty-pigeon-8369.herokuapp.com/users/5', {
      method: 'put',
      headers: {
        ...authHeader(),
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({credits: 20})
    }).then(res=>res.json())
      .then(res => console.log(res))


    }

It gets fired by onClick event of a button in the same file!

Here is my component (other file), which should rerender the toolbar immediatly after updating the credits of my user:

//ItemViewAll.js

  <Toolbar style={{background: '#ffffff', color: '#000'}}>
          <IconButton
            color="inherit"
             onClick={this.handleClose}
             style={{outline: 'none'}}
          >
          <CloseIcon onClick={this.handleClose}/>
          </IconButton>


         {user && user.token &&
            <Button variant="outlined">
               {user.credits}
             </Button>

         }

        </Toolbar>

And here is the json of the user (Dont know if helpful):

//MongoDB

{
    "credits": 20,
    "_id": "5c13fd6008dd3400169867a5",
    "firstName": "Martin",
    "lastName": "Seubert",
    "username": "admin",
    "createdDate": "2018-12-14T18:58:40.295Z",
    "__v": 0,
    "id": "5c13fd6008dd3400169867a5"
}

If you have any suggestions on how to change the render after clicking the button to update the credits of my user in the toolbar of ItemViewAll.js, I would be very thankful!

Cheers and Merry Xmas!

Martin

EDIT

This is the render of my Child-Component with the toolbar:

render() {

      const { classes } = this.props;
      let user = JSON.parse(localStorage.getItem('user'));
         return(
               ...
                 <Toolbar style={{background: '#ffffff', color: '#000'}}>
          <IconButton
            color="inherit"
             onClick={this.handleClose}
             style={{outline: 'none'}}
          >
          <CloseIcon onClick={this.handleClose}/>
          </IconButton>


         {user && user.token &&
            <Button variant="outlined">
               {user.credits}
             </Button>

         }

        </Toolbar>
           )
}

where is the user object in render coming from. Also do you need to use the response of `updateCredits` or not — Shubham Khatri, Dec 16 '18 at 12:42
@ShubhamKhatri Thanks for your replay. I edited my post for you. — Martin Seubert, Dec 16 '18 at 13:48

score 1 · Answer 1 · answered Dec 16 '18 at 12:56

If you have to load any data from the API or similar, you should do it inside componentDidMount

Besides that, it's very hard to tell by the example you provided the hierarchy of your components (composition).

Regardless, if your child component has to update the parent component, you'll have to pass a method as a prop from your parent to your child component and pass the data that's been loaded in your child component to your parent by invoking that same prop you passed.

If you whatsoever have to update the same component from which you fetched the data at the first place, simply call this.setState after the data has been fetched.

If you have to update the parent:

.then(res=>res.json())
.then(res => this.props.methodPassedFromParent(res))

If it's in the same component

.then(res=>res.json())
.then(res => this.setState({ user: res })

Thanks for ypur help, I will try to implement the solution in the same component at first and later try to update the parent. — Martin Seubert, Dec 16 '18 at 13:56

Reactjs rerender component after CRUD Operation

1 Answers1