In React when we want to manage individual state there is a function we can

import called useState that gives us a getter and setter letting React know

when it needs to re-render.

import React, { useState } from 'react';

const myComponent = () => {
  const [count, setCount] = 0;
  ...
}

This initializes count as a state variable that can be accessed with count

and set with setCount.

Incrementing a Counter

If we wanted to write a function that incremented count, we could add a button.

...
return (
    <>
      <p>Count is: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
);

Here we wrapped our text and button in a [React

Fragment](https://react.dev/reference/react/Fragment). Since components can only

return one DOM parent element, Fragments allow us to return more than one

without creating more divs in our markup.

Then I set the onClick for button to an inline function that increases count

by 1 using setCount. If we were to do this without a state variable, i.e.

const count = 0 React wouldn't know when to re-render our data.

Managing List State

This can be used to hold any state or object however, not just numbers and

strings. If we wanted to instead append to a list we might write a function

that gets passed to the onSubmit of a form.

...
[list, setList] = useState([]);
...

const onFormSubmit(event) {
  event.preventDefault();
  list.push(form.name);
  setList(list);
}

Handling Form Input

Changing all our input onChange methods as well to update the state of form

when the data changes.

...
<label>
  <p className={"text-label"}>Name:</p>
  <input
    onChange={handleSetForm}
    type="text"
    name="name"
  />
</label>
...

...
[form, setForm] = useState({ name: '' });
...

const handleSetForm = ({ target: { name, value } }: any) => {
  setForm((form) => ({ ...form, [name]: value }));
};

This updates our form state whenever the data changes. Allowing us to use

form to append to our list above whenever the submit button is clicked.

I've been learning React so that I can build my web applications for others and

myself. React is component based. You create reusable components and render

them with data. Here I created a card component that lets me insert cards. They

can even contain other cards and are easy to understand from the App.js.

Creating the Card Component

To create a new component I just create a new file called Card.js and import

it at the top of App.js.

import Card from './Card.js';

Then inside Card.js I can create my Card. At the top I import my styles and

return the JSX Card object.

import './Card.css';

function Card(props) {
	return (
		<div className="Card">
			<h2 className="CardTitle">{props.cardTitle}</h2>
			<p className="CardContent">{props.children}</p>
		</div>
	);
}

export default Card;

At the bottom I set the default export to Card so that we can import it

properly in App.js.

Styling the Card

My styles are fairly simple, they just create a nice looking card.

.Card {
	text-align: center;
	background-color: lightgrey;
	border: 1px solid grey;
	border-radius: 0.5em;
	margin: 1em;
	height: 20em;
	overflow: hidden;
}

.CardTitle {
	font-size: 1em;
}

.CardContent {
	background-color: white;
	height: 100%;
	border-radius: 0.5em;
	border-top-left-radius: 0em;
	border-top-right-radius: 0em;
	padding: 1em;
}

Using the Card Component

That's great but we still have to insert our card in App.js. Now that we've

created a component and imported it all I have to do in App.js to create a card

is this.

<Card cardTitle="Example Card Title">Hello World</Card>

Conclusion

Finally we can see that this builds a card.

This can be used for building any kind of component, such as dialog boxes,

forms, or anything you can imagine in HTML/CSS.