CODEWITHSUNDEEP
reactjslaravelaxios
wontone_boys
wontone_boys

Reputation: 77

React JS Axios Data Response From Laravel

I am facing a issue with one of my app. I am new to the react. I am using a laravel and react together. My problem is i am fetching data from a api which is a laravel controller. But the result which is coming in a html format but rendering in react it breaking the html codes. i have used parsers like import parse from 'html-react-parser'; import renderHTML from 'react-render-html';

but both are not working and it stop my result data also.

export default class Notify extends Component {

    state={
        duelist:[]
    }

    componentDidMount() {
        axios.get(`upcomingdues`)
          .then(res => {
            const duelist = res.data;
            //console.log(res.data);
            this.setState({ duelist });
          })
      }

    render() {
        const mystyle = {
            height: "300px",
            overflow: "hidden"
        };
        const mystyle1 = {
            left: "0px",
            bottom: "0px"
        };
        const mystyle2 = {
            left: "0px",
            width: "0px"
        };
        return (
            <div> 
               <div className="tab-content">
                <div className="tab-pane active show" id="topbar_notifications_notifications" role="tabpanel">
                 <div className="kt-notification kt-margin-t-10 kt-margin-b-10 kt-scroll ps" 
                 data-scroll="true" data-height="300" data-mobile-height="200" style={mystyle}>

               {this.state.duelist}





                </div>
                </div>
                </div>
                <div className="ps__rail-x" style={mystyle1}>
                <div className="ps__thumb-x" tabindex="0" style={mystyle2}></div>
                </div>
            </div>                              
        );
    }
}

if (document.getElementById('notify')) {
    ReactDOM.render(<Notify />, document.getElementById('notify'));
}

Upvotes: 0

Views: 1284

Answers (2)

wontone_boys
wontone_boys

Reputation: 77

Its resolve by me.

import parse, { domToReact } from 'html-react-parser';

i used react parser and my issue in the above code was react set the state , but after setting the state i am parsing the state. So what i did now is 

componentDidMount() {
        axios.get(`upcomingdues`)
          .then(res => {
            const duelist = parse(res.data);
            //console.log(res.data);
            this.setState({ duelist });
          })
      }

parse it before setting the state and render, and all it works perfectly for me.

Upvotes: 1

vikas dhiman
vikas dhiman

Reputation: 274

Please share your laravel code too. I think the problem is if you write the route in route/api.php. In that case you need to add api before the route name e.g. http://google.com/api/upcomingdues.

Upvotes: 0

Related Questions