Skip to content
React Learning Course Workbook
React Learning Course Workbook
Untitled
More
Share
Explore

React Learning Course Workbook

Tik Tac Tutorial:

⁠
https://beta.reactjs.org/learn/tutorial-tic-tac-toe
⁠
⁠

Adding a Button Component:


⁠
image.png
⁠
⁠



The issue with the code is that the button text is not being displayed correctly. Instead of showing the value of the text prop, the string "text" is being displayed in both buttons. To fix this issue, you need to use curly braces to interpolate the text prop inside the button element.
Here is the corrected code:

import "./styles.css";

function Mybutton({ text }: { text: string }) {
return(
<button>{text}</button>
);
}

function Mybutton2({ text }: { text: string }) {
return(
<button>{text}</button>
);
}

export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Mybutton text="This is title"/>
<Mybutton2 text="This is title2"/>
</div>
);
}

In this code, we have added curly braces to the button element and used the text prop inside them. We have also added type annotations for the text prop, specifying that it is a string. The Mybutton2 component has been updated in a similar way.
If you want to further customize the appearance of the button, you can use CSS styles. You can either define your own styles using a style object and pass it to the button element, or use a third-party library like Material-UI [ or react-awesome-button
You can also use a CSS-in-JS library like styled-components [
4
⁠
] to write CSS styles in your JavaScript code.
For more information on using buttons with icons and labels, you can refer to the Material-UI documentation

Match the Squares

React code to present 2 squares. As you click each square, the other square will change color.
To create a React component that presents two squares that change color when clicked, you can follow the steps below:
Create a new React component called Square that will represent each square.
In the Square component, define a state variable called color and set it to a default value of "blue".
​Render a button element with the onClick handler that will toggle the color state between "blue" and "red".
In the Square component, also render a div element with a style property that sets the background color to the current value of the color state.
​Create a new React component called App that will render two Square components side by side.
​Pass a prop called id to each Square component that will uniquely identify each square.
In the App component, define a state variable called activeSquare and set it to the id of the first Square.
Render the two Square components and conditionally set the style of each Square to be either the default color or the opposite color based on whether the id of the Square matches the activeSquare.
In this code, the activeSquare state variable keeps track of which square is currently active, and is initially set to 1.
When a square is clicked, the handleSquareClick function updates the activeSquare state to the id of the clicked square.
The Square components receive this onClick handler as a prop, and also receive a unique id prop to identify which square was clicked.
The background color of each Square is set based on whether its id matches the activeSquare.

⁠
image.png
⁠
⁠



⁠
image.png
⁠
⁠



Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.