Issue rendering array in react component without using return

Question

I have a reaction function that returns a list of each item in an array after displaying. Within the maps function, i want to check and see if certain parameters are met and render different divs depending on those if statements. When I add a return() that wraps around each of items in the array, I get an error with the if statement. If I do not add the return() it will not render anyrhing. I want to render each item in the array in a way that doesnt show an error with the if statements. here is my code below:

export default function Details(props){
    return(
        <div>
            <p>Homiez</p>
            {
                props.details.map((detail) => {
                    if(detail.owes === 'Omar'){
                        <div>
                            <span>You owe {detail.owed} ${detail.amount} for {detail.description}</span>
                        </div>
                    }
                    else if(detail.owed === 'Omar'){
                        <div>
                            <span>{detail.owes} owes You ${detail.amount} for {detail.description}</span>
                        </div>
                    }
                    else {
                        <div>
                            <span>{detail.owes} owes {detail.owed} %{detail.amount} for {detail.description}</span>
                        </div>
                    }
                })
            }
        </div>
    )
}

Dhananjai Pai · Accepted Answer · 2019-02-05 02:34:48Z

The problem is that you are not returning from inside the map function

export default function Details(props){
return(
    <div>
        <p>Homiez</p>
        {
            props.details.map((detail) => {
                if(detail.owes === 'Omar'){
                    return (<div>
                        <span>You owe {detail.owed} ${detail.amount} for {detail.description}</span>
                    </div>);
                }
                else if(detail.owed === 'Omar'){
                    return (<div>
                        <span>{detail.owes} owes You ${detail.amount} for {detail.description}</span>
                    </div>);
                }
                else {
                    return (<div>
                        <span>{detail.owes} owes {detail.owed} %{detail.amount} for {detail.description}</span>
                    </div>);
                }
            })
        }
    </div>
)
}

Shakil · Accepted Answer · 2019-02-05 03:30:00Z

Its always better to push presentational component rendering concern to child from parent , you can even try following code

function singleDeatilElement(details) {
    if(detail.owes === 'Omar'){
        return (<div>
                <span>You owe {detail.owed} ${detail.amount} for {detail.description}</span>
            </div>);
        }
    else if(detail.owed === 'Omar'){
        return (<div>
            <span>{detail.owes} owes You ${detail.amount} for {detail.description}</span>
        </div>);
    }
    else {
        return (<div>
            <span>{detail.owes} owes {detail.owed} %{detail.amount} for {detail.description}</span>
        </div>);
    }
}

export default function Details(props){
let details = props.details.map((detail) => singleDeatilElement(details));

return(
    <div>
        <p>Homiez</p>
        {details}
    </div>
)
}

Collectives™ on Stack Overflow

Issue rendering array in react component without using return

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related