nazifbara

import styled from 'styled-components';

const Autocomplete = () => {

  const handleSubmit = (e) => {
    e.preventDefault();
  };

  return (
    <div>

nazifbara

// src/modal.js

function ModalContent({ children, title, imageSrc }) {
  const [isOpen, setIsOpen] = React.useContext(ModalContext);

  return isOpen ? (
    <Overlay onClick={() => setIsOpen(false)}>
      <div
        css={{...}}
        onClick={(e) => e.stopPropagation()}

nazifbara

// src/modal.js

function ModalOpenButton({ children }) {
  const [, setIsOpen] = React.useContext(ModalContext);
  return <button onClick={() => setIsOpen(true)}>{children}</button>;
}

nazifbara

// src/App.js

function App() {
  return (
    <Modal>
      <ModalOpenButton>Open modal</ModalOpenButton>
      <ModalContent title="Modal title here!" imageSrc="./forest.jpg">
        <p>
          Modal Content there!
        </p>

nazifbara

<select>
  <option value="value1">option a</option>
  <option value="value2">option b</option>
  <option value="value3">option c</option>
  <option value="value4">option d</option>
</select>