What does <Component render={({ state }) => {}} /> do in React?

Question

I am currently learning ReactJS, and i wanted to use fullPageJS. It's working correctly, but there is some of the syntax that i don't quite get.

The component:

   function home() {
    return (
        <ReactFullpage
            render={({ state, fullpageApi }) => {
            return (
                <ReactFullpage.Wrapper>
                    <div className="section">
                        <h1>Slide 1</h1>
                    </div>
                    <div className="section">
                        <h1>Slide 2</h1>
                    </div>
                </ReactFullpage.Wrapper>
            );
            }}
        />
    )
}
export default home;

Now my question, what does render={({ state, fullpageApi }) => { return(); }} /> render={({ state, fullpageApi }) => { return(); }} /> do? I can see that it is a property, but i don't really get what it's use is.

Answer 1

This is a pattern known as a Render Prop. It's a way to decide what to render via some two-way communication between your code and the code in ReactFullpage.

You pass a function in as one of the props. That alone a fairly common thing to do, such as passing in a function to an onClick prop. What's special here is how that function gets used.

While ReactFullpage is rendering, it will call your function. It's basically saying "hey, here's some data (the state and fullPageApi). What would you like me to render based on that data?" Your function then calculates and returns the elements you want it to render. And then ReactFullpage will use those elements in its final output.

For more information on render props, see react's documentation on the pattern

Answer 2

In react, render is a method that tell react what to display( what the DOM should look like). Return in a method or function is the output of the method or function.

Answer 3

I'm also learning React, But since your question is just JS related. here's your answer, First. let's put your snippet in pieces.

render={ ({ state, fullpageApi }) => { return (/** HTML */); } }

render= is XML, we con't care about it. It is HTML: you're passing a property to the Component element. The brackets {} indicate that it's JS in the HTML code: it means that you're giving JS values to the element's render property. The remaining JS code that was between the {} is:

({ state, fullpageApi }) => { return (/** HTML */); }

Which is a function! So the render prop takes a function that'll probably get executed later.

This anonymous function takes an object as a parameter, but it destructures it and only uses the state and fullpageAPI props, which makes it possible to use them as variables: instead of writing obj.state , you'd write state , as an example. You can read more about restructuring on the MDN docs . It then return s the XML in the parenthesis.