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"?
June 8th 19 at 17:12
1 answer
June 8th 19 at 17:14
Solution
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
Whoa, huge thanks for the detailed example! - Adriel commented on June 8th 19 at 17:17

Find more questions by tags JavaScriptReact