What is the correct way to input the 'name' HTML attribute in an Ant Design select element?

Question

What is the correct way to input the 'name' HTML attribute in an Ant Design select element?

I am facing an issue with the 'name' attribute in my Ant Design Select component. When trying to set the 'name' attribute, I encountered an error message that is causing issues.

https://i.stack.imgur.com/Lzb4t.png

Ant Design Select Component

interface Props {
  name?: string;
  value?: string;

}
export const Select = ({ name, ...props }: Props) => {
  const { Option } = SelecteAntd;

     import {Select } from 'antd';
        
                   <Select
                      bordered={false}
                      {...props}
                      name={name}
                    >
                      <Option value="Youth">under 24</Option>
                      <Option value="Adult">25 - 64</Option>
                      <Option value="Senior">64+</Option>
            </Select>

Form Component

import { Select } from '../shared/Select';

                 <Select 
                        value={surveyData.age}
                        name='age' <------
                        onChange={handleChange}
                    />

reactjs typescript antd

Answer 1

Answer №1

I found a solution that works well for me.

import React from "react";
import { useState } from "react";


const App =()=>{
  const [selectedState, setSelectedState] = useState(')

const handleInputChange =(selectedData,option)=>{
    console.log("[selected Data] ",selectedData);
    console.log("[selected option]",option);
   // setSelectedState(date.name)
  }
 // Make sure to use antd select
return (<Select value={selectedState} onChange={handleChange}>
      <Option name="state" value="jack">Jack</Option>
      <Option name="state" value="lucy">Lucy</Option>
      <Option value="Yiminghe">yiminghe</Option>
    </Select>)    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

To Handle Dynamic Data

import { Select } from 'antd';
import React from 'react';
const { Option } = Select;

const DropdownComponent=({errMsg,optionList,...props})=>{
return <div>
   <Select   style={{ width: 120 }} {...props}>
 {optionList.map(({state,name})=>{
    return <Option name={props.name}  key={state} value=. 
 {state}>{name}</Option>
 })}
</Select>
{errMsg&&<p>{errMsg}</p>}
</div>;
};
export default DropdownComponent;

Answer 2

I found a solution that works well for me.

import React from "react";
import { useState } from "react";


const App =()=>{
  const [selectedState, setSelectedState] = useState(')

const handleInputChange =(selectedData,option)=>{
    console.log("[selected Data] ",selectedData);
    console.log("[selected option]",option);
   // setSelectedState(date.name)
  }
 // Make sure to use antd select
return (<Select value={selectedState} onChange={handleChange}>
      <Option name="state" value="jack">Jack</Option>
      <Option name="state" value="lucy">Lucy</Option>
      <Option value="Yiminghe">yiminghe</Option>
    </Select>)    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

To Handle Dynamic Data

import { Select } from 'antd';
import React from 'react';
const { Option } = Select;

const DropdownComponent=({errMsg,optionList,...props})=>{
return <div>
   <Select   style={{ width: 120 }} {...props}>
 {optionList.map(({state,name})=>{
    return <Option name={props.name}  key={state} value=. 
 {state}>{name}</Option>
 })}
</Select>
{errMsg&&<p>{errMsg}</p>}
</div>;
};
export default DropdownComponent;

What is the correct way to input the 'name' HTML attribute in an Ant Design select element?

Answer №1

To Handle Dynamic Data

Similar questions

React Component Div Containing a Hydration Error

I am encountering an issue where the object I am sending with Next.js is appearing as undefined on the receiving page

Guide to setting headers to application/json in Angular 2

How to resolve undefined callback when passing it to a custom hook in React Native

Experiencing difficulty in finding my way to other web pages

Transitioning Apollo Server from version 3 to version 4 within a next.js environment

Troubleshooting the issue of Algolia-Sanity updates not functioning properly in Next.js

Obtain the unique session identification code from the React application

Tips on integrating the createjs library into a ReactJS project

Angular 2+ encountering an internal server error (500) while executing an http.post request

I am struggling to display the data fetched by Next.js on the page

What is the best way to implement Angular translation for multiple values in a typescript file, while also incorporating parameters?

Typescript - unexpected behavior when using imported JavaScript types:

The React project encountered a build failure following the execution of the npm run command, resulting in the error code ELIFCY

useEffect runs endlessly

Trouble creating Blog pages with Next.js and Sanity

Having trouble navigating through multiple layers of nested array data in react js

Turning XSD into TypeScript code

Endless Cycle of Promise and useState Hook

The React callback is failing to update before navigating to the next page