goksu1 Goto Github PK

Has an eye color that can change via a radio button on the DOM
Renders three BabyHogs, which inherit its eye color
Owns the non-variable data associated with each BabyHog. This includes their: name, eye color, and hobby. (Obviously, MasterHog gets to name her babies, and they genetically inherit her eye color. Not obviously, MasterHog also gets to determine their hobbies) Look inside src/data.js to see data defining what the BabyHog offspring should "inherit."

Has an eyeColor received from its parent
Has a hobby assigned by its parent
Has a name given by its parent
Has a variable weight, that can be changed via buttons

Understanding the data associated with both the MasterHog as well as the BabyHog components, plan out what data should be kept as state vs. props in each component and then implement it
Make use of the src/data.js file (import it!). Hint: arrays can be mapped and return JSX! Just because the starter code has three BabyHog components written in doesn't mean it's an ideal solution
Depending on the BabyHog eye color, a different image should be rendered (several are being imported in the BabyHog component)
While the handleChangeWeight function has been implemented in BabyHog, it is not 'hooked up' to the component. Make sure the function is used so our hogs can grow and shrink when either of the buttons are clicked. (Consider how MasterHog's handleChangeEyeColor function is 'hooked up' if you are stuck here)
For an added bonus, use the weight of the BabyHog to dynamically change the height of the image