Skip to content

Commit 3df1bd7

Browse files
bradwestfallbradwestfall
committed
hooks for 10 (compound comps)
1 parent 4cd67bb commit 3df1bd7

File tree

2 files changed

+81
-137
lines changed

2 files changed

+81
-137
lines changed

‎subjects/10-Compound-Components/exercise.js‎

Lines changed: 35 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -19,70 +19,49 @@
1919
////////////////////////////////////////////////////////////////////////////////
2020
importReactfrom"react";
2121
importReactDOMfrom"react-dom";
22-
importPropTypesfrom"prop-types";
2322

24-
classRadioGroupextendsReact.Component{
25-
staticpropTypes={
26-
defaultValue: PropTypes.string
27-
};
28-
29-
render(){
30-
return<div>{this.props.children}</div>;
31-
}
23+
functionRadioGroup({ children }){
24+
return<div>{children}</div>;
3225
}
3326

34-
classRadioOptionextendsReact.Component{
35-
staticpropTypes={
36-
value: PropTypes.string
37-
};
38-
39-
render(){
40-
return(
41-
<div>
42-
<RadioIconisSelected={false}/>{this.props.children}
43-
</div>
44-
);
45-
}
27+
functionRadioOption({ children }){
28+
return(
29+
<div>
30+
<RadioIconisSelected={false}/>{children}
31+
</div>
32+
);
4633
}
4734

48-
classRadioIconextendsReact.Component{
49-
staticpropTypes={
50-
isSelected: PropTypes.bool.isRequired
51-
};
52-
53-
render(){
54-
return(
55-
<div
56-
style={{
57-
borderColor: "#ccc",
58-
borderWidth: 3,
59-
borderStyle: this.props.isSelected ? "inset" : "outset",
60-
height: 16,
61-
width: 16,
62-
display: "inline-block",
63-
cursor: "pointer",
64-
background: this.props.isSelected ? "rgba(0, 0, 0, 0.05)" : ""
65-
}}
66-
/>
67-
);
68-
}
35+
functionRadioIcon({ isSelected }){
36+
return(
37+
<div
38+
style={{
39+
borderColor: "#ccc",
40+
borderWidth: 3,
41+
borderStyle: isSelected ? "inset" : "outset",
42+
height: 16,
43+
width: 16,
44+
display: "inline-block",
45+
cursor: "pointer",
46+
background: isSelected ? "rgba(0, 0, 0, 0.05)" : ""
47+
}}
48+
/>
49+
);
6950
}
7051

71-
classAppextendsReact.Component{
72-
render(){
73-
return(
74-
<div>
75-
<h1>♬ It's about time that we all turned off the radio ♫</h1>
52+
functionApp(){
53+
return(
54+
<div>
55+
<h1>♬ It's about time that we all turned off the radio ♫</h1>
7656

77-
<RadioGroupdefaultValue="fm">
78-
<RadioOptionvalue="am">AM</RadioOption>
79-
<RadioOptionvalue="fm">FM</RadioOption>
80-
<RadioOptionvalue="tape">Tape</RadioOption>
81-
<RadioOptionvalue="aux">Aux</RadioOption>
82-
</RadioGroup>
83-
</div>
84-
);
85-
}
57+
<RadioGroupdefaultValue="fm">
58+
<RadioOptionvalue="am">AM</RadioOption>
59+
<RadioOptionvalue="fm">FM</RadioOption>
60+
<RadioOptionvalue="tape">Tape</RadioOption>
61+
<RadioOptionvalue="aux">Aux</RadioOption>
62+
</RadioGroup>
63+
</div>
64+
);
8665
}
8766

8867
ReactDOM.render(<App/>,document.getElementById("app"));

‎subjects/10-Compound-Components/solution.js‎

Lines changed: 46 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -17,97 +17,62 @@
1717
// - Arrow right, arrow down should select the next option
1818
// - Arrow left, arrow up should select the previous option
1919
////////////////////////////////////////////////////////////////////////////////
20-
importReactfrom"react";
20+
importReact,{useState}from"react";
2121
importReactDOMfrom"react-dom";
22-
importPropTypesfrom"prop-types";
2322

24-
classRadioGroupextendsReact.Component{
25-
staticpropTypes={
26-
defaultValue: PropTypes.string
27-
};
23+
functionRadioGroup({ children, defaultValue }){
24+
const[value,setValue]=useState(defaultValue);
2825

29-
state={value: this.props.defaultValue};
30-
31-
select(value){
32-
this.setState({ value },()=>{
33-
this.props.onChange(this.state.value);
34-
});
35-
}
36-
37-
render(){
38-
constchildren=React.Children.map(this.props.children,child=>
39-
React.cloneElement(child,{
40-
isSelected: child.props.value===this.state.value,
41-
onClick: ()=>this.select(child.props.value)
42-
})
43-
);
44-
45-
return<div>{children}</div>;
46-
}
26+
return(
27+
<div>
28+
{React.Children.map(children,child=>{
29+
returnReact.cloneElement(child,{
30+
selectedValue: value,
31+
setValue
32+
});
33+
})}
34+
</div>
35+
);
4736
}
4837

49-
classRadioOptionextendsReact.Component{
50-
staticpropTypes={
51-
value: PropTypes.string
52-
};
53-
54-
render(){
55-
return(
56-
<divonClick={this.props.onClick}>
57-
<RadioIconisSelected={this.props.isSelected}/>{" "}
58-
{this.props.children}
59-
</div>
60-
);
61-
}
38+
functionRadioOption({ children, value, selectedValue, setValue }){
39+
return(
40+
<divonClick={()=>setValue(value)}>
41+
<RadioIconisSelected={value===selectedValue}/>{children}
42+
</div>
43+
);
6244
}
6345

64-
classRadioIconextendsReact.Component{
65-
staticpropTypes={
66-
isSelected: PropTypes.bool.isRequired
67-
};
68-
69-
render(){
70-
return(
71-
<div
72-
style={{
73-
borderColor: "#ccc",
74-
borderSize: "3px",
75-
borderStyle: this.props.isSelected ? "inset" : "outset",
76-
height: 16,
77-
width: 16,
78-
display: "inline-block",
79-
cursor: "pointer",
80-
background: this.props.isSelected ? "rgba(0, 0, 0, 0.05)" : ""
81-
}}
82-
/>
83-
);
84-
}
46+
functionRadioIcon({ isSelected }){
47+
return(
48+
<div
49+
style={{
50+
borderColor: "#ccc",
51+
borderWidth: 3,
52+
borderStyle: isSelected ? "inset" : "outset",
53+
height: 16,
54+
width: 16,
55+
display: "inline-block",
56+
cursor: "pointer",
57+
background: isSelected ? "rgba(0, 0, 0, 0.05)" : ""
58+
}}
59+
/>
60+
);
8561
}
8662

87-
classAppextendsReact.Component{
88-
state={
89-
radioValue: "fm"
90-
};
91-
92-
render(){
93-
return(
94-
<div>
95-
<h1>♬ It's about time that we all turned off the radio ♫</h1>
96-
97-
<h2>Radio Value: {this.state.radioValue}</h2>
63+
functionApp(){
64+
return(
65+
<div>
66+
<h1>♬ It's about time that we all turned off the radio ♫</h1>
9867

99-
<RadioGroup
100-
defaultValue={this.state.radioValue}
101-
onChange={radioValue=>this.setState({ radioValue })}
102-
>
103-
<RadioOptionvalue="am">AM</RadioOption>
104-
<RadioOptionvalue="fm">FM</RadioOption>
105-
<RadioOptionvalue="tape">Tape</RadioOption>
106-
<RadioOptionvalue="aux">Aux</RadioOption>
107-
</RadioGroup>
108-
</div>
109-
);
110-
}
68+
<RadioGroupdefaultValue="fm">
69+
<RadioOptionvalue="am">AM</RadioOption>
70+
<RadioOptionvalue="fm">FM</RadioOption>
71+
<RadioOptionvalue="tape">Tape</RadioOption>
72+
<RadioOptionvalue="aux">Aux</RadioOption>
73+
</RadioGroup>
74+
</div>
75+
);
11176
}
11277

11378
ReactDOM.render(<App/>,document.getElementById("app"));

0 commit comments

Comments
(0)