CODEWITHSUNDEEP
reactjstypescriptstyled-components
Rafo
Rafo

Reputation: 654

How to pass input props to a component inside a component in typescript

I'm learning react and typescript and i'm building a form using styled components.

I want to pass props like onChange, type and value to my <Ìnput /> component but i dont know how to do this.

I have a <FormData /> page component were i use my <Ìnput /> component like this:

import { Container } from './styles';

import Header from '../../components/Header';
import Input from '../../components/Input';

const FormData: React.FC = () => {
  return (
    <Container>

      <Header>Your Data</Header>

      <fieldset>
        <legend>Personal Info</legend>
        <Input label='Nome' placeholder='Duck ' onChange={ () => {} } />
        {...others inputs here}
      </fieldset>

      <fieldset>
        <legend>Profissional Info</legend>
        <Input label='curriculum' placeholder='123.412.123-44' type={textarea}/>
      </fieldset>

    </Container>
  );
};

export default FormData;

and my <Ìnput /> component looks like this:

import { Label, InputField } from './styles';

interface InputProps {
  label: string;
  placeholder?: string;
}

function Input({ label, placeholder }: InputProps) {
  return (
    <Label>
      {label}
      <InputField placeholder={placeholder} />
    </Label>
  );
}

export default Input;

I tried to ref and forwardRef and then pass it on props to my styled component but it didnt work.

In my <InputField /> styled component i would like to pass onChange, value and type props received on my generic <Input /> used on <FormData />

And inside my <InputField /> styled component i would like to do something like this:

import styled from 'styled-components';

const { type } = this.props // Can i do that?

export const InputField = styled.type`
  width: 100%;
  margin-left: 0.3rem;
`;

Upvotes: 0

Views: 2265

Answers (1)

Exifers
Exifers

Reputation: 2852

  1. use an input markup for the InputField styled component :
export const InputField = styled.input`
  width: 100%;
  margin-left: 0.3rem;
`;
  1. simply use it as a normal input in your code :
function Input({ label, placeholder, handleChange }: InputProps) {
  return (
    <Label>
      {label}
      <InputField type="text" onChange={handleChange} placeholder={placeholder} />
    </Label>
  );
}

Upvotes: 1

Related Questions