I'm discovering #React and I think there's something I don't understand correctly. Where am I supposed to put the code which computes things before displaying them, what would be the Model in a traditional MVC? Let's say my app deals with fruits, and I want to display a list of them. So I get the list from an API (something like [{type: banana, boughtDate: 2021-01-03}, {type: apple, boughtDate: 2021-01-02}], give it to a FruitsList component, which loops over and generate FruitRow component. Now, I want to display every rows which are a banana in yellow. I can add a style="color: yellow" in my row component with a condition on the fruit type. But what if I want to have this color in every places where a banana is displayed in my app? That would duplicate this kind of if in every components. What is the React solution to this? I could have an "utils" file with a function which takes a fruit and return the color, I guess?
Where I'm confused is that, in Java or other object languages, I would have a getColor() method on the Fruit class, and the Banana subclass would override it to return yellow. Or at the very least I would have the if (type === "banana") only once, in the getColor method of Fruit class. Can I (and should I) try to recreate that model in React? So my ¨logical" code is only in one place, and then I could have generic component like Row which would take content and color as props, instead of a Fruit?

#webdevelopment