Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

131
Views
Assign default value Antd/Select/customDropdown

How to assign default value in Select while you render him. For example, which default value was selected jack. I tried to insert into defaulValue(Select props) value jack , but Select does not return a value but visually it was selected. codesandbox

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You just add in demo.js file. I added defaultValue only and value in options. https://codesandbox.io/embed/custom-dropdown-antd-4-21-5-forked-ip8nn8?fontsize=14&hidenavigation=1&theme=dark

import React, { useState } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { PlusOutlined } from "@ant-design/icons";
import { Divider, Input, Select, Space, Typography } from "antd";

const { Option } = Select;
let index = 0;

const App = () => {
  const [items, setItems] = useState(["jack", "lucy"]);
  const [name, setName] = useState("");

  const onNameChange = (event) => {
    setName(event.target.value);
  };

  const addItem = (e) => {
    e.preventDefault();
    setItems([...items, name || `New item ${index++}`]);
    setName("");
  };

  return (
    <>
      <Select
        style={{
          width: 300
        }}
        defaultValue={items[0]}
        placeholder="custom dropdown render"
        dropdownRender={(menu) => (
          <>
            {menu}
            <Divider
              style={{
                margin: "8px 0"
              }}
            />
            <Space
              align="center"
              style={{
                padding: "0 8px 4px"
              }}
            >
              <Input
                placeholder="Please enter item"
                value={name}
                onChange={onNameChange}
              />
              <Typography.Link
                onClick={addItem}
                style={{
                  whiteSpace: "nowrap"
                }}
              >
                <PlusOutlined /> Add item
              </Typography.Link>
            </Space>
          </>
        )}
      >
        {items.map((item) => (
          <Option value={item} key={item}>
            {item}
          </Option>
        ))}
      </Select>
    </>
  );
};

export default App;
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!