JSX conditional rendering

Question

I'm making my first React-Redux project.

I'd like to change the structure below simply.

const PresentationalComponent = ({
    params,
    query
}) => {
    if (query.title === undefined) {
        return (
            <div>
                <article>
                    <h2>{params.title}</h2>
                    <hr></hr>
                    <p>{params.content}</p>
                </article>
            </div>
        ); 
    } else {
        return (
            <div>
                <div>
                <article>
                    <h2>{query.title}</h2>
                    <hr></hr>
                    <p>{query.content}</p>
                </article>
            </div>
            </div>
        ); 
    }
};

export default HomeDetail;

This is what I've tried. But it occurs error.

<article>
    <h2>{query.title === undefined ? {item.title} : {query.title}}</h2>

Can we make it simple?

Nikita Madeev · Accepted Answer · 2020-06-22 08:14:40Z

2

const PresentationalComponent = ({ params, query }) => (
    <div>
        <article>
            <h2>{query.title ? query.title : params.title}</h2>
            <hr></hr>
            <p>{query.title ? query.content : params.content}</p>
        </article>
    </div>
);

answered Jun 22, 2020 at 8:14

Nikita Madeev

4,49012 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

JSX conditional rendering

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