este problema se puede resolver de diferentes maneras, por lo tanto te dejamos la respuesta más completa en nuestra opinión.
Solución:
Podrías usar el .map()
función para convertir los datos en columns
adecuado para usar con react-select
.
los .map()
La función está disponible en el Array
escribe. Crea un nuevo array desde el array lo llama y le permite proporcionar una función que transforma/cambia cada elemento a medida que se copia del original array.
Puedes hacer uso de él de la siguiente manera:
const columns = [
name: 'OrderNumber', title: 'Order Number' ,
name: 'strawberry', title: 'Strawberry' ,
name: 'vanilla', title: 'Vanilla'
]
const options = columns.map(function(row)
// This function defines the "mapping behaviour". name and title
// data from each "row" from your columns array is mapped to a
// corresponding item in the new "options" array
return value : row.name, label : row.title
)
/*
options will now contain this:
[
value: 'OrderNumber', label: 'Order Number' ,
value: 'strawberry', label: 'Strawberry' ,
value: 'vanilla', label: 'Vanilla'
];
*/
Para obtener más información, consulte la documentación de MDN para .map()
Si sólo desea cambiar el nombre de la name
propiedad a value
puedes usar un map
y destruir el name
propiedad como value
y elige el resto.
const columns = [
name: 'OrderNumber', title: 'Order Number' ,
name: 'strawberry', title: 'Strawberry' ,
name: 'vanilla', title: 'Vanilla'
];
const newColumns = columns.map( item =>
const name: value, ...rest = item;
return value, ...rest
);
console.log( newColumns );
Pero, sospecho que querrías esto ya que react-select
no funciona (por lo que veo) con title
. espera un label
apoyo, supongo. Si es así, vaya y cambie todas las propiedades como sugirió @Dacre Denny. Me gustan las funciones de flecha 🙂 Entonces:
const newColumns = columns.map( item =>
( value: item.name, label: item.title )
);
Usar destructuring
con la propiedad de cambio de nombre se simplificará.
const options = [
value: "chocolate", label: "Chocolate" ,
value: "strawberry", label: "Strawberry" ,
value: "vanilla", label: "Vanilla" ,
];
const columns = options.map(( value: name, label: title ) => (
name,
title,
));
console.log(columns);
valoraciones y comentarios
Recuerda algo, que tienes el privilegio glosar si topaste tu inconveniente justo a tiempo.