CODEWITHSUNDEEP
reactjs
Candace
Candace

Reputation: 53

Can you render a div from a function in React?

I'm trying to use the function below (renderMatchedLogs) to render values from the object it receives, and I'm able to console.log the values but nothing displays on the screen.

I thought JSX can be rendered on the screen from another function? But I'm not sure if this something I misinterpreted or if my logic is off.

Further details of the code:

In the render() {} portion of the code:

<button onClick={this.findMatches}>Find Matches</button>

Which triggers this function to find matches:

    findMatches = () => {
        const foodLog = this.state.foodLog;
        const foodFilter = this.state.foodFilter;
        console.log("food filter", foodFilter);
        Object.keys(foodLog).map((key, index) => {
            if (foodLog[key].foodSelectedKey.some((r) => foodFilter.includes(r))) {
                const matchedLog = foodLog[key];
                this.renderMatchedLogs(matchedLog);
            } else {
                // do nothing
            }
        });
    };

And then this is the function to render the values:


    renderMatchedLogs = (matchedLog) => {
        return (
            <div>
                {matchedLog.dateKey}
                <br />
                {matchedLog.mealKey}
                <br />
                {matchedLog.foodSelectedKey}
                <br />
                {matchedLog.reactionKey}
                <br />
            </div>
        );
    };

Upvotes: 0

Views: 1656

Answers (2)

Waleed Tariq
Waleed Tariq

Reputation: 895

May be what you're looking for is something like this?

state = {
 logs: null
}

renderMatchedLogs = (matchedLog) => {
    return (
        <div>
            {matchedLog.dateKey}
            <br />
            {matchedLog.mealKey}
            <br />
            {matchedLog.foodSelectedKey}
            <br />
            {matchedLog.reactionKey}
            <br />
        </div>
    );
};


findMatches = () => {
    const foodLog = this.state.foodLog;
    const foodFilter = this.state.foodFilter;
    console.log("food filter", foodFilter);
    

    const matchedLogs = [];
    //use forEach instead to push to matchedLogs variable
    Object.keys(foodLog).forEach((key, index) => {
        if (foodLog[key].foodSelectedKey.some((r) => foodFilter.includes(r))) {
            const matchedLog = foodLog[key];
            // this will return the div element from renderMatchedLogs
            matchedLogs.push(this.renderMatchedLogs(matchedLog));
        }
    });

    const logs = (<>
     {matchedLogs.map(div => div)}
    </>);

    this.setState({
      logs
    })
};


render(){
    return (
      <>
        {this.state.logs}
        <button onClick={this.findMatches}>Find Matches</button>
      </>
    )
}

Upvotes: 1

SSC
SSC

Reputation: 21

You’re rendering it, but not telling the application where to put it. I’d recommend putting the matchedLogs items in state somewhere that you update when you call findMatches, and then within your actual component have a something that looks like this

<div>
{matchedLogs && (renderMatchedLogs())}
<div>

Which can be the same as you have, apart from it’ll read the actual data from the state and render it rather than doing all of that itself (as I’m seeing from this context you want that to be user triggered).

Upvotes: 1

Related Questions