Jason
/
safaribook-learning-react-2ed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

6.1 Building a Star Rating Component: fill functions required by StarRating component

chap06
Jason Zhu 2022-01-12 23:47:54 +11:00
parent d38c22ac87
commit 09b754eddc
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
recipes-app/src/components/Menu.jsx
View File

@ -14,7 +14,7 @@ export default function Menu({ recipes }) {
))}
</div>
<div>
<StarRating />
<StarRating totalStars={10}/>
</div>
</article>
);

16
recipes-app/src/components/StarRating.jsx
View File

@ -1,12 +1,12 @@
import React from "react";
import { FaStar } from "react-icons/fa";
export default function StarRating() {
return [
<FaStar color="red" />,
<FaStar color="red" />,
<FaStar color="red" />,
<FaStar color="grey" />,
<FaStar color="grey" />
];
export default function StarRating({ totalStars = 5 }) {
return createArray(totalStars).map((n, i) => <Star key={i} />);
}
const Star = ({ selected = false }) => (
<FaStar color={selected ? "red" : "grey"} />
)
const createArray = length => [...Array(length)];