Vfrdtyky

I am trying to fetch an api inside componentDidMount. The api result will be set to the component's state and the state mapped and passed to a children component.

If I fetch the api using the fetch method inside the componentDidMount everything works fine:

componentDidMount(){

    fetch(apiToFetch)

        .then((result) => result.json())

        .then((result) => result.entries)

        .then((entries) => this.setState({ ...this.state, entries }))

        .catch((error) => console.log(error));

}

if I use fetch inside a method and then call this method inside componentDidMount nothing is rendered:

componentDidMount() {

    this.fetchApiToEntries(GLOBAL_PORTFOLIO_COLLECTION_API);

}



fetchApiToEntries(apiToFetch) {

    fetch(apiToFetch)

        .then((result) => result.json())

        .then((result) => result.entries)

        .then((entries) => this.setState({ ...this.state, entries }))

        .catch((error) => console.log(error));

}

I cannot understand what I am missing from the lifecycle.
Shouldn't react do the following?

• Init the state


• Render


• Call componentDidMount


• Rerender

Here is my initial component:

export default class Portfolio extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            entries: 

        }



    }

    componentDidMount() {



        this.fetchApiToEntries(GLOBAL_PORTFOLIO_COLLECTION_API);

    }

    fetchApiToEntries(apiToFetch) {

        fetch(apiToFetch)

            .then((result) => result.json())

            .then((result) => result.entries)

            .then((entries) => {

                this.setState({

                    ...this.state,

                    entries

                })

            })

            .catch((error) => console.log(error));

    }



    render() {



        return (

            <Fade bottom>

                <div className="Portfolio">

                    <div className="Portfolio__title"><h4 className="color--gradient text--spacing">WORKS</h4></div>

                    <OwlCarousel {...options}>

                        {this.state.entries.map((item) => (

                            <PortfolioElement item={item} />

                        ))}

                    </OwlCarousel>

                    <AnchorLink href='#contact'><Button className="contact-button btn--gradient slider-button Services__button">Let's get in touch</Button></AnchorLink>

                </div>

            </Fade>

        )

    }

}

PortfolioElement is the actual component not being rendered.
Any advice?
Thank you.

Edit: both methods are not rerendering the component the right way (...something I didn't expect: I don't know why but if I call them twice in componentDidMount the component will render the right way). I think I am missing something in the state.

I have no error in the console and this is how I set my initial state:

this.state={entries:}

and this is what the actual entries looks like from the console:

 entries:

[0:{credits: "..."

    description: "..."

    featuredImage: {path: "portfolio/01.jpg"}

    firstImage: {path: "portfolio/firstimage.jpg"}

    secondImage: 

    slug: "..."

    tasks: (5) [{…}, {…}, {…}, {…}, {…}]

    title: "..."

    _by: "5beae6553362340b040001ee"

    _created: 1542123322

    _id: "5beaef3a3362340bf70000b4"

    _mby: "5beae6553362340b040001ee"

    _modified: 1542149308

},

1:{...}

]

My state after the fetch is the same way.

UPDATE I figured out that the the problem is: when the state changes the component is not rerendering the child with the correct props. I called the API in an higher order component passed down the props and added a componentWillUpdate method forcing a state refresh that rerenders the component. Not the ideal solution but I am not figuring out other ways until now. Any advice?

do you need to bind fetchApiToEntries in the constructor or use fat arrows?

this.fetchApiToEntries = this.fetchApiToEntries.bind(this);

sorry I cant comment not enough rep

Idk what your api response is but I tested your code with a fake API and changed

fetchApiToEntries(apiToFetch){}

to Arrow Function (Arrow Function)

fetchApiToEntries = (apiToFetch) => {}

and it's working fine.

Full Example:

    export default class Portfolio extends React.Component {

        constructor(props) {

            super(props);

            this.state = {

                entries: 

            }

        }

        componentDidMount() {

          this.fetchApiToEntries('https://jsonplaceholder.typicode.com/posts');

        }

        fetchApiToEntries = (apiToFetch) => {

            fetch(apiToFetch)

                .then(result => result.json())

                .then((entries) => {

                    this.setState({

                        ...this.state,

                        entries

                    })

                })

                .catch((error) => console.log(error));

        }

        render() {

          const {entries} = this.state;

            console.log(entries);

            return (

                // Everything you want to render.

            )

        }

    }

Hope it helps you.