Estoy manipulando cadenas con los campos devueltos por la API y tienen algunas características únicas, por lo que intento ajustarlos.
Por ejemplo:
un campo proviene del JSON como: "contract_time": "full_time"
Dado esto, me gustaría intentar manipularlo para obtener el resultado "Tiempo completo".
Lo estoy llamando directamente como el siguiente:
<BadgeComponentFirst> <Typography color="red" fontSize="0.6em"> {job.contract_time} </Typography>¿Cómo pasaría tal manipulación de cadenas a un objeto para primero, eliminar el '_' y poner en mayúsculas y la primera de cada palabra?
Gracias
El enfoque que necesita debe diferir si los valores API para ese campo se conocen de antemano o no.
Si los valores se conocen de antemano, use un objeto para asignar los valores conocidos a su equivalente de cara al usuario:
const CONTRACT_TIMES = { full_time: "Full Time", part_time: "Part Time", }; <Typography color="red" fontSize="0.6em"> {CONTRACT_TIMES[job.contract_time] || "Unknown"} </Typography>Si la API puede devolver cualquier valor y solo desea mostrar una versión limpia, escriba una función que realice la manipulación que necesita:
function getFriendly(str) { return str.split("_").map(getFriendlyWord).join(" "); } function getFriendlyWord(word) { return word.slice(0, 1).toUpperCase() + word.slice(1); } <Typography color="red" fontSize="0.6em"> {getFriendly(job.contract_time)} </Typography>Desea dividir cada palabra en '_' en una matriz, luego puede mapear sobre la matriz y poner en mayúscula la primera letra de cada palabra. Luego desea volver a unir las palabras, separadas por espacios. Tu puedes hacer:
let job = { contract_time: "full_time" } console.log(job.contract_time.split("_").map(word => word[0].toUpperCase() + word.substr(1)).join(' '));consola: tiempo completo
definir un método transforma sus datos:
const capitalize = (str) => str[0].toUpperCase() + str.slice(1); const verbose = (snake_cased) => { snake_cased.split('_').map(capitalize).join(' '); };Y luego puede usar este transformador en cualquier lugar dentro del código JSX sin ningún límite. Lo único que debe tener en cuenta: esta función se activará en cada renderizado. Si este cálculo es complicado, es posible que necesite algunas técnicas de optimización.
const Component = () => ( <BadgeComponentFirst> <Typography color="red" fontSize="0.6em"> {verbose(job.contract_time)} </Typography> </BadgeComponentFirst> );