En React, un estado es un objeto que almacena información relevante para un componente específico. Representa el estado actual de ese componente y puede cambiar a lo largo del tiempo debido a interacciones o eventos. El estado en React se utiliza para controlar la representación visual y el comportamiento de un componente, y permite que la interfaz de usuario se actualice automáticamente cuando se producen cambios en el estado.

Para poder trabajar con estados lo primero que tenemos que hacer es importar una propiedad de React llamada useState

import {useState} from "react";

Para ser mas preciso, lo que estas agregando es un hook, que vendria a ser la herramienta para añadirle funcionalidad a los componentes que crees en React. Empecemos a utilizarlo.

Una vez que lo tenemos, tenemos que declarar el estado y asignarle un valor por defecto a ese estado

const state=useState(false);

¿Que pasa si le damos console.log a state? Lo que ocurrira es que hemos creado un array con dos posiciones.

• state[0] será el valor por defecto que tendrá el estado, en este caso false
• state[1] será una función que te permitirá cambiar ese estado.

Entendido esto, nos conviene guardar estos datos en variables para poder trabajarlos mas facil. Podemos hacerlo en una linea utilizando la desestructuracion de ES6

const [isFollowing, setIsFollowing]=useState(false);

Ahora isFollowing = state[0] y setIsFollowing = state[1]

De aca en adelante tomemos el ejemplo de las TwitterCards de nuevo

import { useState } from "react";

export function TwitterFollowCard({formatUsername, username="unknown", children, isFollowing}){
    const [isFollowing, setIsFollowing]=useState(false);
    const text=isFollowing ? "Siguiendo" : "Seguir";
    const buttonClassname=isFollowing ? "tw-followCard-button is-following"
    : "tw-followCard-button"
    return(
        <article className="tw-followCard">
        <header className="tw-followCard-header">
            <img 
            className="tw-followCard-avatar"
            src={`https://unavatar.io/${username}`}
            alt="Avatar del usuario" 
            />
            <div className="tw-followCard-info">
                <strong>{children}</strong>
                <p>{formatUsername(username)}</p>
            </div>
        </header>
        <aside>
            <button className={buttonClassname}>{text}</button>
        </aside>
    </article>
    )

Perfecto, ya tenemos todo armado. Ahora necesitamos que cuando se apriete el boton cambie el estado. En JS eso lo haciamos con un event listener, pero en React se hace diferente. Tenemos que decirle que cuando hagamos click se ejecute una funcion. Lo haremos con el atributo onclick en el boton

        <aside>
            <button className={buttonClassname} onclick={handleClick}>{text}</button>
        </aside>

Y crearemos la funcion handleClick donde le diremos que si el estado es true, cambie a false y si es false, que cambie a true

const handleClick=()=>{
	setIsFollowing(!isFollowing);
}