React 動的なフォームコンポーネントを作る

React 動的なフォームコンポーネントを作る

components
  UI
    Input
      Input.js
      Input.css
  App.js

Imput コンポーネント

import React from 'react';
import ReactDOM from 'react-dom';
import classes from './input.css'

const input = (props) => {
  console.log(props)
  let inputElement = null;

  switch (props.inputtype) {
    case('input'):
      inputElement = <input className={classes.InputElement} {...props}/>;  // ...props にはname placeholderなどが入る
      break;
    case('textarea'):
      inputElement = <textarea className={classes.InputElement} {...props}></textarea>;
      break;
    default:
      inputElement = <input className={classes.InputElement} {...props}/>;
  }

  return (
    <div className={classes.Input}>
      <label className={classes.Label}>{props.label}</label>
      {inputElement}
    </div>
  )
}

export default input;

Inputコンポーネントを呼び出す

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container,Row, Col } from 'react-bootstrap';
import Input from './components/UI/Input/Input'

class App extends React.Component {
  constructor(props) {
    super(props)
  }
  
  render () {
    return (
      <div className="App">
        <Input label={"input"} inputtype={"input"} name="name"/>
        <Input label={"textarea"} inputtype={"textarea"} name="body" placeholer={"aaaaaa"}/>
        <input type="submit" value="送信"/>
      </div>
    );
  }
}

export default App;

参考

www.udemy.com