Fragments about react-flip-page HOT 4 CLOSED

Yes, the key is to give FlipPage an array of components.

from react-flip-page.

I think your approach might be wrong. If you don’t mind showing a bit of code, we could try to find a solution.

My guess is that you are rendering those articles from an array or something similar. Then you don’t need to use a Fragment to render all the articles. Otherwise, the FlipPage component would only receive one child, which is the Fragment, and then it will clone it to add some props, thus making it into a div.

from react-flip-page.

@darenju thanks for the reply! Yeah absolutely, so I have
<FlipPage orientation="horizontal" ...> <RenderMessages message_file="./messages/message_4.json"... /> </FlipPage>
in the parent component. And then in the RenderMessages component, this is my render function:

render(){ return ( <> {this.state.data ? this.relevant_messages() : <span>Loading...</span>} </> ); }

And lastly what the this.relevant_messages() function returns is another Fragment:
return ( <> {table_pairs.map(item => ( <article>{item}</article> ))} </> )
where regardless of the actual contents of the table_pairs array, I'd expect there to be one page per element of that array.

Would the solution just be to access table_pairs in the parent component, and then call map over there to render a collection of React components?

from react-flip-page.

Yes, the key is to give FlipPage an array of components.

Awesome, that did it thank you!

from react-flip-page.