ReactJS - Al renderizar el combobox solo me muestra los ids como numeros y otro issue

Hola, ¿Cómo están?, tengo la siguiente duda:

Resulta que estoy haciendo una aplicación en react.

Ya rendericé el combobox pero, sin embargo, al hacer click sobre el mismo, en vez de traerme las tareas relacionadas, me trae los ids como numeros o me trae todas las tareas con la palabra "[object Object]".

Por otra parte, tengo otro issue: cuando hago click en el boton agregar tareas, estoy agregando diferentes comboboxes y cuando selecciono un valor en uno de los comboboxes, ese mismo valor se selecciona en el resto de los comboboxes. Y yo quiero que ese valor que selecciono se tome solo para el combobox que seleccione.

Ahora les mando captura de los issues y el código, por que yo lo estoy haciendo sin constructor ya que me trae el reducer directamente. Por eso no necesito el metodo handle change, por que no estoy inicializando estados, ya que directamente los traigo del reducer a traves del map state to props.

componentDidMount(){
this.props.listadoTareas();
}

buscarTareas = () =>{
let options = [];
return this.props.listaDeTareas.map((tarea,index) => {
let tareaAsociada = JSON.stringify(tarea);
return options.push(<option key={index} value={index}>{tareaAsociada.nombre}
</option>)
})
}

renderComboBox = ({ type,name,input, data, valueField, textField,placeholder, onSelect, meta:
{touched, error, warning}}) =>
<>
<Combobox
{...input}
name = {name}
type = {type}
id = {input.name}
placeholder={placeholder}
valueField={valueField}
value = {input.value || []}
textField={textField}
onChange={input.onChange}
onSelect={onSelect}
onBlur={() => input.onBlur()}
data={data}
/>
{touched && ((error && <span className='form-field-error'>{error}</span>)
|| (warning &&
<span>{warning}</span>))}
</>



renderArrayTareas = ({fields, meta: { error,submitFailed}}) => (
<ul>
<li>
<button type="button" onClick={() => fields.push()}>Agregar Tarea</button>
{submitFailed && error && <span>{error}</span>}
</li>
{ fields.map((tareaAsociada, index,fields) =>
<li key={index}>
<button
type="button"
title="Remove Tarea"
onClick={() => { fields.remove(index)
if(fields.length == 0 || fields.length === undefined){
}
try{
for(let x in fields){
fields.remove(index)
let d = fields.selectedIndex;
if(fields.remove(index) && d >= 1 && d< fields.length ){
fields.removeAll(index);
}
}
}catch{console.info("se borra indice no numerico")}

<h4>Tarea #{index + 1}</h4>
<Field
name = "field"
valueField="value"
textField="tarea"
component= {this.renderComboBox}
data = {this.buscarTareas()}
/>
</li>
) }

{error && <li className="error">{error}</li>}
</ul>
);

<div>
<FieldArray
name = 'tareasAsociadas'
component ={this.renderArrayTareas}
label = 'TareasAsociadas'
/>
<button type="submit" disabled={submitting}>
Confirmar
</button>
<button type="button" disabled={pristine || submitting}
onClick={reset}>
LimpiarValores
</button>
</div>
Ahi les mando un zipeado que se llama issueFormularioServicio. Lo pueden extraer directamente. Ahi hay una imagen de los dos errores.

Muchas Gracias

Francisco

• issueFormularioServicio.zip(61,3 KB)