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>
<div> <div>
<StarRating /> <StarRating totalStars={10}/>
</div> </div>
</article> </article>
); );

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

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