How to render a string using nested ternary operator using react?

Question

i want to display a particular string based on condition using ternary operator using react.

below is my code,

const ChildComponent = (data) => {
    const name = data.name //array
    const type = data.type //object

    return (
        <div>{type.name} {type.id} </div> //here condition to be added
    );
}

for the above code in return block type.name and type.id are displayed.

now i want to display name if there is type and type.name. id should be shown if type and type.id and "none" to be displayed if no type and type.name or type.id

could someone help me get this fixed. thanks.

Benni · Accepted Answer · 2021-08-18 11:08:03Z

1

You could do something like this

const ChildComponent = (data) => {
    const name = data.name //array
    const type = data.type //object

    return (
        <div>{type && type.name ? name : type && type.id ? type.id : "none"}</div>
    );
}

I am not sure if I understood all the conditions that you wanted to have, but I hope you get the concept.

answered Aug 18, 2021 at 11:08

Benni

6643 gold badges12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render a string using nested ternary operator using react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related