Just for fun 👉 React vs. jQuery vs. Svelte, same 🐱 app
Keeping the state of all squares in the Board component will allow it to determine the winner in the future. Next, we need to change what happens when a Square is clicked. We need to create a way for the Square to update the Board’s state. Since state is considered to be private to a component that defines it, we cannot update the Board’s state directly from Square.
In addition to the updated counts, a human reading this would probably say that we swapped Alexa and Ben’s ordering and inserted Claudia between Alexa and Ben. However, React is a computer program and does not know what we intended. Because React cannot know our intentions, we need to specify a key property for each list item to differentiate each list item from its siblings. If we were displaying data from a database, Alexa, Ben, and Claudia’s database IDs could be used as keys. At this point, the Board component only needs the renderSquare and render methods.
- So on demand of Netscape, Brenden Eich, in 1995 invented a prototype based language for their Navigator Browser.
- OOP keeps the data protected from accidental modifications from an outside function.
- Instead of defining a class which extends React.Component, we can write a function that takes props as input and returns what should be rendered.