React JS Axios Data Response From Laravel

Question

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'));
}

wontone_boys · Accepted Answer · 2019-12-19 12:22:05Z

1

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.

answered Dec 19, 2019 at 12:22

wontone_boys

772 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vikas dhiman · Accepted Answer · 2019-12-19 09:46:40Z

0

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.

answered Dec 19, 2019 at 9:46

vikas dhiman

2743 silver badges20 bronze badges

2 Comments

wontone_boys Over a year ago

Well it does not do anything with route/api.php. Result or the output is coming from the ajax call by using the react component. But the only difference is html is broken and its not coming correctly.

wontone_boys Over a year ago

This is the output material coming : a href="#" class="kt-notification__item"> <div class="kt-notification__item-icon"> <i class="flaticon2-line-chart kt-font-success"></i> </div> <div class="kt-notification__item-details"> <div class="kt-notification__item-title"> ID no is 30 and Student name is testingg testingg </div> <div class="kt-notification__item-time">2 hrs ago</div> </div> </a>

Collectives™ on Stack Overflow

React JS Axios Data Response From Laravel

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related