Currently, I have these elements where the "YoYo" text is aligned to the left by default. However, I am looking to adjust the positioning of some "YoYo" texts so that they can appear on the right side.
I attempted to provide a style object with justifyContent:'flex-end' or alignSelf:'flex-end', but unfortunately, neither of them seemed to work.
<List>
<ListItem containerElement={<ChatObject id='1' value="YoYo" style={{alignSelf:'flex-end'}} />} />
<ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
<ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
<ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
<ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
</List>
The ChatObject component is defined as:
render() {
return (
<TextField
id={this.props.id}
value={this.props.value}
underlineShow={false}
/>
);
}