Reactjs conditional attributes for an antd timeline

You cannot build the actual JSX syntax code based on a ternary operator. You need to do one of the following :

Either build each prop based on your condition as following :

<Timeline>    {        this.props.data.contents.chart.map(function(e, index) {            return (                <Timeline.Item key={ index }                               dot={ (e.label === 'Registered' ? <Icon type="idcard" style={{ fontSize: '12px' }} /> : null) }                               color={ (e.label === 'Registered' ? 'red' : '') }>                    {e.label}                    <span>{moment(e.date).format("DD MMM YYYY")}</span>                </Timeline.Item>            );        })    }            </Timeline>

Or return completely different JSX based on the condition :

<Timeline>{    this.props.data.contents.chart.map(function(e, index) {        if (e.label === 'Registered') {            return (                <Timeline.Item key={ index }                               dot={ <Icon type="idcard" style={{ fontSize: '12px' }} /> }                               color="red">                    {e.label}                    <span>{moment(e.date).format("DD MMM YYYY")}</span>                </Timeline.Item>            );        }        return (            <Timeline.Item key={ index }>                {e.label}                <span>{moment(e.date).format("DD MMM YYYY")}</span>            </Timeline.Item>        );    })}            </Timeline>