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>
);
}
}