How to use react - 4 common examples

function Search(props) {
  const [filters, setFilters] = useState([]);
  const [createFileterShow, setCreateFileterShow] = useState(false);
  const [currentFilterId, setCurrentFilterId] = useState(undefined);
  const [filter, setFilter] = useState({});
  const [loading, setLoading] = useState(false);
  const [barFilters, setBarFilters] = useState([]);
  const [filterName, setFilterName] = useState('');
  const [deleteFilterShow, setDeleteFilterShow] = useState(false);
  const [editFilterShow, setEditFilterShow] = useState(false);

  const column = [
    {
      title: '名称',
      dataIndex: 'name',
      // width: '20%',
      render: name => (
        <div style="{{">
          
            </div>

var ManyOptions = function ManyOptions() {
  var _React$useState = React.useState([]),
      selected = _React$useState[0],
      setSelected = _React$useState[1];

  var _React$useState2 = React.useState(dummyOptions),
      options = _React$useState2[0],
      setOptions = _React$useState2[1];

  return React.createElement(Grommet, {
    full: true,
    theme: grommet
  }, React.createElement(Box, {
    fill: true,
    align: "center",
    justify: "start",
    pad: "large"
  }, React.createElement(Select, {
    multiple: true,
    closeOnChange: false,
    placeholder: "select an option...",
    selected: selected,
    options: options,
    dropHeight: "medium",
    onClose: function onClose() {
      return setOptions(options.sort(function (p1, p2) {

type: "fullscreen-exit"
  })), !fullscreen && React.createElement("button", {
    type: "button",
    onClick: requestFullscreen
  }, React.createElement(Icon, {
    type: "fullscreen"
  })))), x5playsinline && !x5videofullscreen && src && !loading && !waiting && !seeking && !ended && !kernelMsg && React.createElement("button", {
    className: styles$1.blocked,
    onClick: onPlayClick
  }, React.createElement(Icon, {
    type: "play-circle"
  })), loading && !kernelMsg && React.createElement("div", {
    className: styles$1.loading
  }, React.createElement(Icon, {
    type: "loading"
  })), kernelMsg && React.createElement("div", {
    className: styles$1.kernelMsg
  }, kernelMsg.type, ": ", kernelMsg.detail));
});
ReactPlayerSkin.propTypes = {

const useDimensions = (): ScaledSize => {
    const [dimensions, setDimensions] = useState(Dimensions.get('window'))
    useEffect(() => {
        const listener = (
            ev: Parameters<
                Parameters[1]
            >[0],
        ) => {
            /*
            this fixes this issue:
            https://trello.com/c/iEtMz9TH/867-video-stretched-on-ios-and-android-crash-on-orientation-change

            this means we will never relayout on smaller screens. For now this is ok
            because our screen size assumptions are a 1:1 match with iphone/ipad and
            a good enough™ match on android

            a more elegant fix would be to detect when a full screen video/photo
            is playing, basically anything that enables rotation when