sending data through a datalist in react

Question

So over the last few months i started from 0 and started learning react. While it is a challenge i was heavily encouraged to keep going. Ive been pointed in the right direction a multitude of times thanks to stack overflow and am asking for help again. Right now i have a react component that makes a model popup.

In that popup i want to have a selectable list that can be submitted and posted. The idea is exactly like a data list. Which i am trying to do in react, currently the only way i know to send something in react is using axois library but im not able to render anything in the modal model. So i decide to make a jsx datalist in the modal body itself.

Is this the right way to go about it? is there an easier way to accomplish what i want to do within the model?

const ModalExample = (props) => {
  const {
    className
  } = props;

  const [modal, setModal] = useState(false);
  const toggle = () => setModal(!modal);
  const externalCloseBtn = <button className="close" style={{ position: 'absolute', top: '15px', right: '15px' }} onClick={toggle}>&times;</button>;
  return (
    <div>
      <Button color="danger" onClick={toggle}>OTHER</Button>
      <Modal isOpen={modal} toggle={toggle} className={className} external={externalCloseBtn}>
        <ModalHeader>Add any soft skills that you believe you have</ModalHeader>
        <ModalBody>
          <form action="/amazonaws.com/updateSkill">
            <input list="other1" name="other2" />
            <datalist id="other1">
              </option><option value="excellent Communication ">
              </option><option value="Leadership experience">
              </option><option value="Ability to work under pressure">
              </option><option value="High work ethic">
              </option><option value="Organized">
              </option></datalist>
            <input type="submit" />
          </form>

        </ModalBody>
        <ModalFooter>
          {/* <Button color="primary" onClick={toggle}>Do Something</Button>{' '}*/}
          <Button color="secondary" onClick={toggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

export default ModalExample;

Thank you in advance

Idin Khayami · Accepted Answer · 2020-04-17 22:34:06Z

As I understand you want to get a data list from API and show it in the HTML section so add your API response to the state and use it in return section to show data in proper HTML tags.

const ModalExample = (props) => {
  const {
    className
  } = props;
  const [modal, setModal] = useState(false);
  const [response, setResponse] = useState(false);

  const apiCall = () => {
    axios
    .get("http://")
    .then((response) => {
      setResponse(response);
    }).catch((error) => {
      console.err(error);
    });
  }

  useEffect(() => {
    apiCall();
  }, [value]);

  const toggle = () => setModal(!modal);
  const externalCloseBtn = <button className="close" style={{ position: 'absolute', top: '15px', right: '15px' }} onClick={toggle}>&times;</button>;
  return (
    <div>
      <Button color="danger" onClick={toggle}>OTHER</Button>
      <Modal isOpen={modal} toggle={toggle} className={className} external={externalCloseBtn}>
        <ModalHeader>Add any soft skills that you believe you have</ModalHeader>
        <ModalBody>
          <form action="/amazonaws.com/updateSkill">
            <input list="other1" name="other2" />
            <datalist id="other1">
              {response}
            </datalist>
            <input type="submit" />
          </form>

        </ModalBody>
        <ModalFooter>
          {/* <Button color="primary" onClick={toggle}>Do Something</Button>{' '}*/}
          <Button color="secondary" onClick={toggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

export default ModalExample;

Collectives™ on Stack Overflow

sending data through a datalist in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related