Answer the following questions considering the learning outcomes for this week. Make sure to record evidence of your processes. You can use code snippets, screenshots or any other material to support your answers.
Do not fill in the feedback section. The Founders and Coders team will update this with feedback on your progress.
Use JSX to create DOM elements
Here we create a component called PlayerBoard that renders a 2d grid based on an array we passed as props (board)
Use component state to manage DOM updates
-
playerBoard is a state variable created using the useState hook. It represents a 2D array (a grid) that contains information about the player's game board, with all values set to null using Array.from.
-
Once ships are placed onto it using the placeShip function, [...playerBoard] creates a new array that is a shallow copy of the playerBoard array. Shallow copy means that the new array is a new object, but the elements inside it (in this case, the rows of the 2D array) are still references to the same objects in memory as the original playerBoard.
-
setPlayerBoard([...playerBoard]) is then used to update the state. It's important to note that in React, you should not mutate state directly, so you create a new array (shallow copy) and update the state with that new array. React will then trigger a re-render of the component with the updated state.
-
So, when setPlayerBoard([...playerBoard]) is called, it effectively sets the playerBoard state to a new array that is a copy of the previous playerBoard, ensuring that state changes are properly managed in a React component. Any changes made to this new array won't affect the original playerBoard state, which is essential for React's state management and rendering updates.
[Learning outcome...]
The fact we used a generated array that way is quite confusing to be honest.I also find the whole React concept still not easy to fully understand. Having only 2 days to complete the project made us rush a lot, I' m pretty sure there is a better way to structure and write the whole app in terms of components and logic behind it
Beth
You have correctly implemented the useState hook to manage the playerBoard state in your component, and you've done a great job of explaining why it's important to create a shallow copy of the array when updating state (nice use of the spread operator) 😎
Here is some more info on cloning an Object in Javascript: Shallow Copy vs. Deep Copy