How preload data in prime React

Question

I must preload the information in a dropdown but my props.element gives me a code, not a phrase understandable by the end user.

this is my definition.

    const [validations, setValidations] = useState([]);
    const [selectedStatusFrom, setSelectedStatusFrom] = useState(null)
    const [selectedStatusTo, setSelectedStatusTo] = useState(null)
    const [selectedGroups, setSelectedGroups] = useState([]);
    const [selectedRoles, setSelectedRoles] = useState([]);
    const [selectedUsers, setSelectedUsers] = useState([]);
    const [selectedStatusToCheckDuplicity, setSelectedStatusToCheckDuplicity] = useState([]);
    const [time, setTime] = useState(0);
    const [name, setName] = useState('');
    const [active, setActive] = useState(true);
    const[confirmDelete, setConfirmDelete]=useState(false);
    const options = [{ label: 'FIFO', name: 'Antiguos primero'},{ label: 'LIFO', name: 'Nuevos primero' },{ label: 'FLIFO', name: 'Intercalados'}];
    const[assignStrategy, setAssignStrategy]=useState([options]);



    useEffect(async () => {
        if (props.pipeline._id) preloadData()
    }, []);


    const preloadData = () => {
        setSelectedStatusFrom(getStatus(props.pipeline.statuses, props.pipeline.transition.fromStatusId))
        setSelectedStatusTo(getStatus(props.pipeline.statuses, props.pipeline.transition.toStatusId))
        setSelectedGroups(chargeArray(props.groups, 'id', props.pipeline.groups, 'groupId'))
        setSelectedRoles(chargeArray(props.roles, 'id', props.pipeline.roles, 'roleId'))
        setSelectedUsers(chargeArray(props.users, 'id', props.pipeline.users, 'userId'))
        setSelectedStatusToCheckDuplicity(chargeArray(props.statuses, 'id', props.pipeline.statusToCheckDuplicity, 'statusId'))
        setValidations(props.pipeline.validations)
        setName(props.pipeline.processName)
        setTime(props.pipeline.time)
        setActive(props.pipeline.active)
        setAssignStrategy(props.pipeline.assignStrategy)
        
    }

How do I preload the name property of the options array in the dropdown id="type" props.pipeline.assignStrategy can contain FIFO, LIFO,FLIFO

<div>
                    <h5>Tipo de reparto</h5>
                    <hr/>
                    <div className="p-fluid p-formgrid p-grid">

                        <div className="p-field p-col">
                            <label className="p-col-fixed" htmlFor="strategy">Reparto</label>
                            <div className="p-col">
                            <Dropdown id={'strategy'} appendTo={document.body} value={assignStrategy} options={options} optionLabel="name" onChange={(e) => setAssignStrategy(????????????)}  placeholder="Seleccione Tipo Reparto"/>

                            </div>
                        </div>
                    </div>
                </div>

im using prime react

Answer 1

I think you have to pass the single value in assignStrategy. Because the Prime Dropdown accepts single value in value field and shows the selected value.

  const options = [
    { label: 'FIFO', name: 'Antiguos primero' },
    { label: 'LIFO', name: 'Nuevos primero' },
    { label: 'FLIFO', name: 'Intercalados' },
  ];
  const [assignStrategy, setAssignStrategy] = React.useState(null);

  React.useEffect(() => {
    setAssignStrategy('FLIFO');
    // This is where you set below code, but make sure you pass single.
    // value instead of an array/object.
    // setAssignStrategy(props.pipeline.assignStrategy)
  }, []);

  <Dropdown
    id={'strategy'}
    appendTo={document.body}
    value={assignStrategy}
    options={options}
    optionLabel="name"
    optionValue="label"
    onChange={(e) => setAssignStrategy(e.value)}
    placeholder="Seleccione Tipo Reparto"
  />

Please check this demo: https://stackblitz.com/edit/react-ts-3z7wkl?file=App.tsx