How to use the react component?

Question

How to use the react component?

Connect react-masonry-infinite.
Basic usage of the component looks like this:

<masonryinfinitescroller hasmore="{this.state.hasMore}" loadmore="{()" => this.setState({ elements: this.state.elements.push("Element") })}
>
{
 this.state.elements.map(id =>
 </masonryinfinitescroller>
)
}



How to look line this.state.elements.map if 

const elements = [
{ 
 id: 1,
 thumbnail: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_n.jpg",
 thumbnailWidth: 300,
 thumbnailHeight: 320
},
 { 
 id: 2,
 thumbnail: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_n.jpg",
 thumbnailWidth: 320,
 thumbnailHeight: 190
},
{
 id: 3,
 thumbnail: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_n.jpg",
 thumbnailWidth: 320,
 thumbnailHeight: 148
 }, etc.
]



And so it is not clear what to do with the line loadMore={() => this.setState({ elements: this.state.elements.push("Element") })}

What kind of "Element"?

Adriel asked June 8th 19 at 17:12

Related questions

More answers about "How to use the react component?"

1 answer

Lenny.Botsfo answered on · Accepted Answer · 2019-06-08T17:14:45.102Z

1. The function map transforms in colbeck element of your data array in JSX code describing the element and output an array of such elements. This is the best and accepted method to render a list in react.
A trivial example:

const employees = ['Bill', 'Matt', 'Sarah'];

return (
 
 {employees.map((employee i) => (
 <li key="{i}">employee</li>
)}
 
);

The result:
the <ul>
the <li>Bill</li>
the <li>Matt</li>
the <li>Sarah</li>
</ul>



2. "Element" as you can see the string. Then the developers just shove in the array string, but ideally there should be called a function interowa request to the server.

Here is a more close to life example:
class Example extends Component {
 state = {
 elements: [],
 page: 1,
 limit: 20,
 total: 0,
 isLoading: false,
 isError: false,
};

 componentDidMount() {
this.loadThumbnails();
}

 loadThumbnails = () => {
 const { page limit } = this.state;

this.setState({
 isLoading: true,
 isError: false,
 }, () => {
axios.get(
 `api/somePath?limit=${limit}&page=${page + 1}`
 ).then(response => {
 const { data: {"elements", total } } = response;

 this.setState(prevState => ({
 elements: [
...prevState.elements
...elements
],
 page: page + 1,
 isLoading: false,
total,
}));
 }).catch(error => {
this.setState({
 isLoading: false,
 isError: true,
});
});
});
};

 render() {
 const {
elements
page
limit,
total,
isLoading,
 } = this.state;

 const hasMore = page * limit < total;

return(
 <masonryinfinitescroller hasmore="{hasMore}" loadmore="{this.loadThumbnails}">
 {elements.map(element => (
 <img key="{element.id}" src="{element.thumbnail}" style="{{" width: element.width + 'px', height: element.height }}>
)}
 {isLoading && <div>Loading...</div>}
 {isError && (
the <div>
 Can't load data. Please check your internet connection.
 <button onclick="{this.loadThumbnails}">
 Try again
</button>
</div>
)}
</masonryinfinitescroller>
 ); 
}
}



Then as soon as you flip through the list