Connect ReactJS frontend to REST API in spring

Question

Based on the tutorial on this page: https://spring.io/guides/tutorials/react-and-spring-data-rest/ I am trying to create a frontend to my Spring REST API backend. I have modified these examples a bit to fit my project in spring but unfortunately it doesn't work now. For now, I'm just trying to write out a few records from the database on the main page. Instead of text from the database, a blank white page appears.

Here you can see the curl printout:

C:\Users\Admin>curl http://localhost:8080/getAllDelegations
[{"delegationId":3,"user":{"userId":3,"role":[],"companyName":"PeterCorp","companyAddress":"Wojty┼éy 12 88-T99 bydgoszcz","companyNip":"11111111111","name":"Jan","lastName":"Kowalski","email":"[email protected]","password":"1234","status":true,"registrationDate":"2020-03-31T13:29:51.142+0000","delegations":[]},"description":"efa","dateTimeStart":"2020-03-31T15:34:00.134+0000","dateTimeStop":"2020-03-31T15:34:00.134+0000","travelDietAmount":0.0,"breakfastNumber":0,"dinnerNumber":0,"supperNumber":0,"transportType":"AUTO","ticketPrice":0.0,"autoCapacity":true,"km":0,"accomodationPrice":0.0,"otherTicketsPrice":0.0,"otherOutlayDesc":0.0,"otherOutlayPrice":0.0}]

My java method from Controller class:

@RequestMapping(value = "/getAllDelegations", method = RequestMethod.GET)
@ResponseBody
public List<Delegation> getAllDelegations(){
    return delegationService.findAll();

}

DelegationsTest.js - This file should printout data from the database:

    import React from 'react';

        const Delegations = (props) => {
          return (
            <div>
              <center><h1>Delegations List</h1></center>
              props.delegations.map((delegation) => (
                <div>
                  <div>
                    <h5>{delegation.delegationId}</h5>
                    <h6>{delegation.user.lastName}</h6>
                    <p>{delegation.user.companyName}</p>
                  </div>
                </div>
              ))
            </div>
          )
        };


        export default Delegations

My main app.js file:

const React = require('react');
const ReactDOM = require('react-dom'); 
import Delegations from './components/DelegationsTest';

class App extends React.Component  { 
    constructor(props) { 
        super(props);
        this.state = {
                delegations: []
        };
    }
     componentDidMount() {
            fetch('http://localhost:8080/getAllDelegations')
            .then(res => res.json())
            .then((data) => {
              this.setState({ delegations: data })
            })
            .catch(console.log)
     }

     render() {
            return (
                    <div>
                        <h1>HelloWorld</h1>
                        <div>
                            <Delegations delegations={this.state.delegations} />    
                        </div>
                    </div>

            )

     }
}
ReactDOM.render(
        <App />,
        document.getElementById('react')
    )

Could anyone tell me where I made the mistake? I would be very grateful.

Nazar Ahmed Amjad · Accepted Answer · 2020-04-15 19:04:38Z

As you are using componentDidMount Delegation component is already rendered and the new props received don't update the component.

I would suggest you convert the Delegation functional component to a class component and use the componentWillReceiveProps method to update the state whenever props are received

    import React from 'react';

    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
            delegations: props.delegations
        };
    }


    componentWillReceiveProps(nextProps) {
        this.setState({
            delegations: nextProps.delegations
        })
    }
    render() {
        return ( <
            div >
            <
            center > < h1 > Delegations List </h1> </center >
            this.state.delegations.map((delegation) => ( <
           div >
                <
                div >
                <
                h5 > {
                    delegation.delegationId
                } < /h5> <
                h6 > {
                    delegation.user.lastName
                } < /h6> <
                p > {
                    delegation.user.companyName
                } < /p> <
                /div> <
                /div>
            )) <
            /div>
        )
    };

 }

 export default Delegations

Collectives™ on Stack Overflow

Connect ReactJS frontend to REST API in spring

Here you can see the curl printout:

My java method from Controller class:

DelegationsTest.js - This file should printout data from the database:

My main app.js file:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here you can see the curl printout:

My java method from Controller class:

DelegationsTest.js - This file should printout data from the database:

My main app.js file:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related