[Solved] React JSX function is not returning component

Hello, I have a meteor web app where I want to loop through the database and with the values from each element of the database create new React components. But when I try to render them through the JSX syntax it for some reason wont render the components.

Here is the code where it should loop through the database and create the components:

import React, { Component } from 'react';
import {withTracker} from 'meteor/react-meteor-data';
import {SavedFractals} from '../api/savedfractals.js';
import FractalPreset from './FractalPreset.js'

class Share extends Component {
        constructor(props) {
                super(props);
                this.state = {
                        presetcount: 0  
                };
                this.renderpreset = this.renderpreset.bind(this);
        }

        componentDidUpdate() {
                if (this.state.presetcount < this.props.savedfractals.length) {
                        var i = this.state.presetcount
                        while (i < this.props.savedfractals.length) {
                                this.renderpreset(Object.values(this.props.savedfractals[i]));
                                i++;
                        }
                        this.setState({presetcount: i});
                }
        }
        renderpreset(fractalvalues) {
                return <FractalPreset fractalvalues = {fractalvalues}/>;
        }

        render() {
                return (
                        <div className="container">
                                <h3>Hello world</h3>
                        </div>
                );
        }
}

export default withTracker(() => {
        return {
                savedfractals: SavedFractals.find().fetch(),
        };
})(Share);

Here is the component’s code I want to render, the console does not log the “loL”:

import React, { Component } from 'react';
import {SavedFractals} from '../api/savedfractals.js';

export default class FractalPreset extends Component {

        savetodatabase = () => {
                SavedFractals.update(this.props.fractalvalues._id, {
                        $set: { fractalvalues: [presetgenerated: true]},
                });     
        }

        render() {
                console.log("loL");
                return (
                        <div className="container">
                                <h2 onClick = {this.savetodatabase}>{this.props.fractalvalues[1][0]}</h2>
                        </div>
                );
        }
}

It looks like you aren’t calling <FractalPreset /> in any render methods. You’ve got it in renderpreset, which is run directly in componentDidUpdate, but that doesn’t render, only render is used for render, which is why it’s called render. You might need to put your render in a render

1 Like

Thanks for the help! I ended up going with a map function inside the render() and it works as intended:

render() {
                return (
                        <div className="container">
                                {this.props.savedfractals.map(function(fractalvalues, i) {
                                        return <FractalPreset fractalvalues = {Object.values(fractalvalues)} key = {i}/>
                                })}
                        </div>
                );
}
1 Like