You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
816 B
34 lines
816 B
class Button extends React.Component {
|
|
render() {
|
|
return (
|
|
<button style={{background: this.props.color}}>
|
|
{this.props.children}
|
|
</button>
|
|
);
|
|
}
|
|
}
|
|
|
|
class Message extends React.Component {
|
|
render() {
|
|
// highlight-range{1-3}
|
|
// The Message component must take `color` as as prop to pass it
|
|
// to the Button. Using context, the Button could connect to the
|
|
// color context on its own.
|
|
return (
|
|
<div>
|
|
<p>{this.props.text}</p>
|
|
<Button color={this.props.color}>Delete</Button>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
class MessageList extends React.Component {
|
|
render() {
|
|
const color = 'purple';
|
|
const children = this.props.messages.map(message => (
|
|
<Message text={message.text} color={color} />
|
|
));
|
|
return <div>{children}</div>;
|
|
}
|
|
}
|
|
|