Блог

Я пытаюсь отобразить форму внутри модальной, я работал над кнопкой, которая добавляла бы поле ввода, после чего содержимое формы больше не было видно, и у меня тоже нет ошибок консоли, поэтому я понятия не имею, что я сделал не так. Любая помощь будет оценена:

     import {Button, Col, Row, Modal} from 'react-bootstrap';
    import _ from "lodash";

    const DropdownVariableRow = ({
      variableValue,
      modalVariableValues,
      setModalVariableValues,
      id,
    }) => {
      const [value, setValue] = useState(variableValue);
      return (
        <Row key={id} className={"form-group"}>
          <SimpleFormText
            label={<Fragment>Value Name</Fragment>}
            value={value}
            onChange={(newValue) => setValue(newValue)}
            width={{ sm: 4 }}
            formGroupWrapper={false}
          />
          <div className="col-sm-1 text-right" style={{ paddingTop: 30 }}>
            <Button
              bsSize={Size.SMALL}
              bsStyle={State.DANGER}
              onClick={() => removeVariable(scriptVariable)}
            >
              <Icon icon={"fas fa-times"} />
            </Button>
            <Button
              onClick={() =>
                addVariable(value, modalVariableValues, setModalVariableValues)
              }
            >
              Add Value
            </Button>
          </div>
        </Row>
      );
    };
    
    const addVariable = (value, modalVariableValues, setModalVariableValues) => {
      setModalVariableValues(modalVariableValues.concat([value]));
    };

    export default function ScriptVariablesFields({
    model = 'script'
    }) {
const [modalVariableValues, setModalVariableValues] = useState([])
    <Modal show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>EDIT DROPDOWN VALUES</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        {_.map(modalVariableValues, (variableValue) => {
          return (
            <DropdownVariableRow
              key={`DropdownVariable${variableValue}`}
              variableValue={variableValue}
              modalVariableValues={modalVariableValues}
              setModalVariableValues={setModalVariableValues}
              id={`DropdownVariableRow${variableValue}id`}
            />
          );
        })}
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={handleSubmit}>Update Values</Button>
      </Modal.Footer>
    </Modal>
}
  

Я все еще новичок в react, поэтому любой, кто может помочь с отладкой, будет очень полезен. Спасибо.

Если вы не потеряли форматирование при публикации, ваши функции ScriptVariablesFields не работают и не возвращают никаких JSX. Если это причина, забавно, что вы не получаете никаких ошибок. Элементы React всегда должны возвращать JSX

Это должно быть что-то вроде этого:

 export default function ScriptVariablesFields({model = 'script'}) {

   const [modalVariableValues, setModalVariableValues] = useState([]);

   return (
      <Modal show={show} onHide={handleClose}>
         <Modal.Header closeButton>
           <Modal.Title>EDIT DROPDOWN VALUES</Modal.Title>
         </Modal.Header>
         <Modal.Body>
            {_.map(modalVariableValues, (variableValue) => {
              return (
                <DropdownVariableRow
                  key={`DropdownVariable${variableValue}`}
                  variableValue={variableValue}
                  modalVariableValues={modalVariableValues}
                  setModalVariableValues={setModalVariableValues}
                  id={`DropdownVariableRow${variableValue}id`}
                />
              );
            })}
          </Modal.Body>
        <Modal.Footer>
          <Button onClick={handleSubmit}>Update Values</Button>
        </Modal.Footer>
     </Modal>
   )    
}