I would like to write a TextInput for a login as a single ponent. This textfield of Material UI should of course contain different props. How can I implement this with Textfieldprops from Material UI?

This is the code for the TextInput.tsx

import React from 'react'
import TextField, {TextFieldProps} from '@material-ui/core/TextField'

interface InputProps {
   textinput: TextFieldProps
}


const TextInput: React.FC<InputProps> = (textinput) => {
      return(
           <div>
              <Textfield id={textinput.id} label={textinput.label} variant={textinput.variant}/>
           </div>
}
export default TextInput

This is the code for Login.tsx

import React from 'react'
import TextInput from "./Input/TextInput"

const Login: React.FC = () => {
      return(
         <div>
            <TextInput ??? => What has to go in? You can't do that id="outline-basic"/>
         </div>
}

export default Login

What do I have to insert in Login.tsx for the TextInput? I don't quite understand that? Do I have to inherit in the interface for the TextInput ponent?

I would like to write a TextInput for a login as a single ponent. This textfield of Material UI should of course contain different props. How can I implement this with Textfieldprops from Material UI?

This is the code for the TextInput.tsx

import React from 'react'
import TextField, {TextFieldProps} from '@material-ui/core/TextField'

interface InputProps {
   textinput: TextFieldProps
}


const TextInput: React.FC<InputProps> = (textinput) => {
      return(
           <div>
              <Textfield id={textinput.id} label={textinput.label} variant={textinput.variant}/>
           </div>
}
export default TextInput

This is the code for Login.tsx

import React from 'react'
import TextInput from "./Input/TextInput"

const Login: React.FC = () => {
      return(
         <div>
            <TextInput ??? => What has to go in? You can't do that id="outline-basic"/>
         </div>
}

export default Login

What do I have to insert in Login.tsx for the TextInput? I don't quite understand that? Do I have to inherit in the interface for the TextInput ponent?

• javascript
• reactjs
• typescript
• types
• material-ui

2 Answers 2

You can find all props for TextField here You can do your code like that:

import React from 'react'
import TextField, {TextFieldProps} from '@material-ui/core/TextField'

const TextInput: React.FC<InputProps> = ({ id: number, label: string, error: string, ...rest: TextFieldProps }) => {
  return(
    <div>
      <label htmlFor={id}> // i've created it just for example. TextField includes Label ponent
        {label}
      </label>
      <Textfield id={id} {...rest} />
      <span>{error}</span> i've created it just for example. TextField includes helper ponent
    </div>
  )
}

export default TextInput

and then you can do something like that

import React from 'react'

import TextInput from "./Input/TextInput"

const Login: React.FC = ({ onChange }) => {
      return(
         <div>
            <TextInput
              id="outline-basic"
              label="some label"
              error="some error"
              onChange={onChange}
              placeholder="Some placeholder"
              name="dog"
              fullWidth
            />
         </div>
}

export default Login

onChange, placeholder, name, fullWidth - TextFieldProps
id, label, error - just props

if you use it like this:

import { TextField, TextFieldProps } from '@mui/material'

interface Props extends TextFieldProps {
  someNewProp: string
}

you will get the following error: (alias) type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps import TextFieldProps

An interface can only extend an object type or intersection of object types with statically known members.ts(2312).

You can follow these instructions to fix it.

type Props = {
  someNewProp: string
} & TextFieldProps