Un estado en React es un almacén de datos mutable. De este modo las propiedades (props) se usan para crear una instancia del componente y son inmutables, mientras que los estados actúan en el contexto del componente y son mutables. 

La característica más interesante de los estados es que cuando estos cambian, la vista del componente también cambia. 

Para el caso de nuestro ejemplo vamos a definir un estado para almacenar el valor de los likes de cada post. En este caso usaremos lo que se conoce como un hook de estado. Un hook no es más que una función que se conecta a características especiales de React. 

Iniciamos importando el hook de estado (también conocido como useState) desde la librería de React. 

import { useState } from "react";

Ahora declaramos una variable de estado:

function Post(props) {

 const [likes, setLikes] = useState(props.likes);

 ...

Para declarar a la variable de estado se invoca al hook useState. Este recibe como parámetro el valor inicial de la variable. Para nuestro caso el valor inicial será lo que está en el atributo likes de props.

useState retorna una pareja de valores. Por una parte el estado actual y por otra parte una función que se encarga de actualizar el estado. La variable de estado la denominaremos likes mientras que la función la denominaremos setLikes. Estos nombres son arbitrarios, sin embargo se recomienda mantener esa convención de nombramiento: variable, setVariable.

Ahora vamos a modificar la función handleLikes así:

const handleLikes = () => {

   console.log("Button clicked...");

   setLikes(likes + 1);

 };

Como podemos observar, se invoca a la función setLikes y se pasa como parámetro el nuevo valor para likes. En este caso será el valor anterior incrementado en 1

Finalmente actualizamos la función renderLikes para que tome como referencia la variable de estado:

const renderLikes = () => {

   if (likes === 0) return "Give us a like";

   else return "Likes: " + likes;

 };

Este será entonces el código completo del componente:

import { useState } from "react";

import Button from "react-bootstrap/Button";

import Card from "react-bootstrap/Card";

import Col from "react-bootstrap/Col";




function Post(props) {

 const [likes, setLikes] = useState(props.likes);

 const renderLikes = () => {

   if (likes === 0) return "Give us a like";

   else return "Likes: " + likes;

 };

 const handleLikes = () => {

   console.log("Button clicked...");

   setLikes(likes + 1);

 };

 return (

   <Col>

     <Card style={{ width: "18rem" }}>

       <Card.Body className="mb-3">

         <Card.Title>{props.author}</Card.Title>

         <Card.Text>{props.content}</Card.Text>

         <Card.Text>{renderLikes()}</Card.Text>

         <Button variant="primary" onClick={handleLikes}>

           Like

         </Button>

       </Card.Body>

     </Card>

   </Col>

 );

}


export default Post;

Ahora si va al navegador podrá observar que cuando se hace clic en el botón Like de cada post el valor de los likes se incrementa.