Cómo incluir una variable de React en una cadena

En React, coloca una expresión de JavaScript entre llaves de JSX para combinar un valor cambiante con texto. Por ejemplo, className={type + "Box"} usa concatenación de cadenas, mientras que className={`${type}Box`} usa un literal de plantilla. React es una biblioteca de JavaScript, y JSX permite escribir estas expresiones con una sintaxis similar al marcado.

Incluir una variable de React en una cadena mediante concatenación de cadenas

En este ejemplo, type es la cadena "large", así que type + "Box" concatena ambos valores y produce "largeBox". Si ambos operandos son números, + los suma. En un componente de React, usa la expresión como valor de un atributo dentro de las llaves de JSX. Si type cambia, React recibe el nuevo valor combinado en el siguiente renderizado. El siguiente ejemplo ejecutable de JavaScript muestra únicamente esa operación con cadenas; no renderiza React ni JSX.

Ejecuta este ejemplo:

const type = "large";
const className = type + "Box";
console.log(className);

largeBox

Puedes unir varias partes con +, incluida una cadena que contenga un espacio. Por ejemplo, firstWord + " " + secondWord coloca un espacio entre ambos valores. Sin ese espacio explícito, las palabras quedan pegadas. En JSX, escribe toda la expresión entre llaves, como en <h1>{firstWord + " " + secondWord}</h1>. Las llaves delimitan la expresión de JavaScript; no forman parte del texto resultante.

Para unir pocas partes, la concatenación es directa. Cuando hay varios valores, signos de puntuación o espacios, repetir el operador + puede hacer más difícil leer la frase que se pretende formar. Un literal de plantilla permite construir la misma cadena de otra manera.

Incluir una variable de React en una cadena mediante literales de plantilla

Un literal de plantilla usa comillas invertidas y ${...} para insertar una expresión en una cadena. En JSX, coloca el literal de plantilla entre las llaves de expresión del atributo: className={`${type}Box`}. Si type vale "large", la expresión de JavaScript produce el mismo valor largeBox que la concatenación. Esta notación resulta útil cuando una cadena combina varios valores o necesita espacios, porque el texto que los rodea queda dentro de una sola plantilla fácil de leer. Los caracteres literales entre los marcadores se copian en el resultado; por eso, si quieres separar los nombres mostrados, escribe un espacio directamente entre ${firstName} y ${lastName}. También puedes incluir signos de puntuación o etiquetas del mismo modo, como una coma, dos puntos o un sufijo de unidad. La expresión de plantilla sigue evaluándose como una sola cadena de JavaScript: no añade elementos JSX ni cambia los valores interpolados. En el texto de JSX, coloca esa expresión entre llaves, como en el ejemplo del encabezado. Para un atributo como className, coloca el literal de plantilla dentro de las llaves del atributo. Al renderizar el componente, React recibe la cadena resultante como valor del texto o del atributo. Si falta un espacio en el resultado, revisa los caracteres literales alrededor de cada marcador antes de cambiar los valores de JavaScript.

Por ejemplo, con const firstName = "Ada" y const lastName = "Lovelace", JSX puede renderizar un encabezado con Hello, ${firstName} ${lastName}! como expresión de literal de plantilla: <h1>{`Hello, ${firstName} ${lastName}!`}</h1>. Mantén las llaves de JSX alrededor de la expresión de JavaScript y las comillas invertidas alrededor del literal de plantilla. Elige la concatenación para unir pocas partes o un literal de plantilla cuando la interpolación facilite la lectura de una cadena más larga; ambos producen cadenas normales de JavaScript que React puede usar.