Component showing html tag

[RafaelVsc]

Hello,

I'm trying to populate the component with variables, one of them returns the text entered by the user, however, the component is showing the html tag ... can anyone help?

[rcdexta]

Hi @RafaelVsc can you pls share the code that you used to generate this timeline

[RafaelVsc]

Hi @rcdexta

I've found a solution with "dangerouslySetInnerHTML" but I'm not sure if this is the best option for the problem.

` getFinishedTasks() { axios.get('/client/' + id_customer + '/timeline/info') .then((response) => { this.setState({ timelineList: response.data[0].tasks }); }).catch(error => { console.log(error); }); }

htmlDecode(input) {
    var div = document.createElement('div');
    div.innerHTML = input.trim();
    console.log('in' + input);
    return div.firstChild;
}

render() {

    return (
        <Timeline>

            {this.state.timelineList.map((item) => {
                console.log(item)
                return (
                    <TimelineEvent title={item[0]}
                        createdAt={item[1]}
                        subtitle={item[7]}
                        icon={<img src={"/static/img/icons-svg/icon-" + item[10] + ".svg"} />}
                        collapsible={true}
                        container={item[4]}>
                        <div className="timeline-notes" dangerouslySetInnerHTML={{ __html: item[4]}} />

                    </TimelineEvent>

                )

            })
            }

        </Timeline>`

another question, how can I change the color of the line around the icon?