I've got a ponent, let's call Screen, which imports a ponent that will contain a search result. A method in Screen loops through an array of objects and for each object instaniates a new search result ponent and stores them in an array.

I'm new to React, so my question is, is it correct to create an instance of a class extending Component using the new keyword, or is there a proper React way to do this? If so what is the correct way of rendering these ponents in the Screen class, as the way I'm doing it in the snippet below doesn't seem to work as nothing renders.

Screen.js - I've cut down the file to just show what I'm on about

import React, { Component } from "react";
import { Text, View } from "react-native";

import SearchResult from "ponents/SearchResult";


class Screen extends Component {
    searchResultsComponents = [];

    submitSearchQuery(searchParam /* Array of objects */) {
        this.searchResultsComponents = [];
        for(let result in this.searchResults) {
            this.searchResultsComponents.push(new SearchResult(this.searchResults[result]));
            }
            this.forceUpdate();
        });
    }

    render() {
        return(
            <View>  
                { this.searchResultsComponents.forEach((it) => { it.render(); }) }
            </View>
        );
    }
}

export default Screen;

SearchResult.js

import React, { Component } from "react";
import { Text, View } from "react-native";


class SearchResult extends Component {
    title;
    setTitle(title) {
        this.title = title;
    }
    getTitle() {
        return this.title;
    }

    description;
    setDescription(description) {
        this.description = description;
    }
    getDescription() {
        return this.description;
    }

    constructor(searchResult) {
        super();
        this.setTitle(searchResult.snippet.title);
        this.setDescription(searchResult.snippet.description)
    }

    render() {
        return(
            <View>
                <Text>{ this.title }</Text>
                <Text>{ this.description }</Text>
            </View>
        );
    }
}

export default SearchResult;

I've got a ponent, let's call Screen, which imports a ponent that will contain a search result. A method in Screen loops through an array of objects and for each object instaniates a new search result ponent and stores them in an array.

I'm new to React, so my question is, is it correct to create an instance of a class extending Component using the new keyword, or is there a proper React way to do this? If so what is the correct way of rendering these ponents in the Screen class, as the way I'm doing it in the snippet below doesn't seem to work as nothing renders.

Screen.js - I've cut down the file to just show what I'm on about

import React, { Component } from "react";
import { Text, View } from "react-native";

import SearchResult from "ponents/SearchResult";


class Screen extends Component {
    searchResultsComponents = [];

    submitSearchQuery(searchParam /* Array of objects */) {
        this.searchResultsComponents = [];
        for(let result in this.searchResults) {
            this.searchResultsComponents.push(new SearchResult(this.searchResults[result]));
            }
            this.forceUpdate();
        });
    }

    render() {
        return(
            <View>  
                { this.searchResultsComponents.forEach((it) => { it.render(); }) }
            </View>
        );
    }
}

export default Screen;

SearchResult.js

import React, { Component } from "react";
import { Text, View } from "react-native";


class SearchResult extends Component {
    title;
    setTitle(title) {
        this.title = title;
    }
    getTitle() {
        return this.title;
    }

    description;
    setDescription(description) {
        this.description = description;
    }
    getDescription() {
        return this.description;
    }

    constructor(searchResult) {
        super();
        this.setTitle(searchResult.snippet.title);
        this.setDescription(searchResult.snippet.description)
    }

    render() {
        return(
            <View>
                <Text>{ this.title }</Text>
                <Text>{ this.description }</Text>
            </View>
        );
    }
}

export default SearchResult;

• javascript
• reactjs
• react-native

• 1 dont call new on the ponent... just create the ponent instead this.searchResultsComponents.push( <SearchResult {...this.searchResults[result]} />) then in your render just render the array <View>{this.searchResultsComponents}</View> – John Ruddell Commented Jun 12, 2018 at 21:32

2 Answers 2

The proper way to approach this is, inside your render method:

 { this.searchResultsComponents.map((it, index) => <it key={index} />) }

The key is optional, but remended by react to improve rendering performance when rendering an array of ponents.

See https://reactjs/docs/lists-and-keys.html#basic-list-ponent for more details.

Your approach does not work, because by just calling the render method, the HTML DOM is returned by the function call. However, you just call the function and don't do anything with the return value.

The reason your approach doesn't work is that forEach method doesn't return anything. Instead of forEach use map. Your modified line should look something like this:

this.searchResultsComponents.map((ponent, index) => <View key={index}>{ponent}</View>);

The reason I wrapped the ponent into View is because this way each item can get key attribute which is remended when displaying arrays.