Appending a new dom element in react

Question

I've created a custom component and I want to add child element when the component renders if a certain property is set to be true. I used the following code, but the component is not rendered. what am I doing wrong here.

    let deleteNode = '';
    if(deletable){
        deleteNode = '<div />'
    }

    let defaultClasses = 'chips chips-rounded';

    return (
        <div className={classNames(classes, defaultClasses)} onClick={ this.onClick }>
            {avatar}
            <span>{this.props.labelText}</span>
            {deleteNode}
        </div>
    )

you can use ternary {deletable ? '<div />' : ''}

maioman
– maioman

2017-11-24 09:17:01 +00:00
Commented Nov 24, 2017 at 9:17 — maioman
– maioman, Commented Nov 24, 2017 at 9:17
Well your is much cleaner! :)

Imesh Chandrasiri
– Imesh Chandrasiri

2017-11-24 09:30:51 +00:00
Commented Nov 24, 2017 at 9:30 — Imesh Chandrasiri
– Imesh Chandrasiri, Commented Nov 24, 2017 at 9:30

Panther · Accepted Answer · 2017-11-24 09:14:16Z

1

You are trying to render a component but actually you are just sending string in your deleteNode. Your code should be something like below

if(deletable){
    deleteNode = (<div />);
}

answered Nov 24, 2017 at 9:14

Panther

9,5183 gold badges26 silver badges37 bronze badges

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

Comments

Hemerson Carlin · Accepted Answer · 2017-11-24 09:17:43Z

1

I different approach would be:

render() {
  const defaultClasses = 'chips chips-rounded'
  return (
    <div className={classNames(classes, defaultClasses)} onClick={ this.onClick }>
        {avatar}
        <span>{this.props.labelText}</span>
        {deletable && <div />}
    </div>
  )
}

So you don't need the extra if checking.

answered Nov 24, 2017 at 9:17

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

Collectives™ on Stack Overflow

Appending a new dom element in react

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