Browse Source

Syntax tweaks

main
Alex Krolick 7 years ago
parent
commit
de22379cae
  1. 13
      examples/context/motivation.js
  2. 2
      examples/context/theme-detailed-app.js
  3. 6
      examples/context/theme-detailed-theme-context.js
  4. 2
      examples/context/theme-detailed-themed-button.js

13
examples/context/motivation.js

@ -11,12 +11,13 @@ class Button extends React.Component {
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
// 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>
{this.props.text} <Button color={this.props.color}>Delete</Button>
<p>{this.props.text}</p>
<Button color={this.props.color}>Delete</Button>
</div>
);
}
@ -24,10 +25,10 @@ class Message extends React.Component {
class MessageList extends React.Component {
render() {
const color = "purple";
const children = this.props.messages.map((message) =>
const color = 'purple';
const children = this.props.messages.map(message => (
<Message text={message.text} color={color} />
);
));
return <div>{children}</div>;
}
}

2
examples/context/theme-detailed-app.js

@ -1,4 +1,4 @@
import ThemeContext, {themes} from './theme-context';
import {ThemeContext, themes} from './theme-context';
import ThemedButton from './button';
class App extends React.Component {

6
examples/context/theme-detailed-theme-context.js

@ -10,6 +10,6 @@ export const themes = {
};
// highlight-next-line
const ThemeContext = React.createContext(themes.dark);
export default ThemeContext;
export const ThemeContext = React.createContext(
themes.dark
);

2
examples/context/theme-detailed-themed-button.js

@ -1,4 +1,4 @@
import ThemeContext from './theme-context';
import {ThemeContext} from './theme-context';
class ThemedButton extends React.Component {
// highlight-range{3-10}

Loading…
Cancel
Save