How do I convert this ReactJS class based component to function based component?

Question

I am trying to repeat a inputbox when a user submit a data on a textbox. The solution I have able to create following through several sources is as:

a simple input box, inputbox.js

import React from 'react';

const InputBox = () => {
  return(
      <input type="text" placeholder='Add your content line here ... '/>
  );
};

export default InputBox;

component that repeats inputbox on Enter or clicking CreateRecursiveInputBox.js

import React from "react";
import styled from "@emotion/styled";
import InputBox from "./inputbox.js";

// creating a bundler component
const Bundle = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
`;

class CreateRecursiveInputBox extends React.Component {

  constructor(props) {
      super(props);
      this.state = {
          values: {
              0: ''
          },
      };
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(index, value) {
      this.setState({
          values: {
              ...this.state.values,
              [index]: value
          }
      });
  }

  handleSubmit(event) {
      event.preventDefault();
      this.setState({
          values: {
              ...this.state.values,
              [Object.keys(this.state.values).length]: '' // add new empty item to list
          }
      });
  }

  render() {
      return (
          <div>
              <form onSubmit={this.handleSubmit}>
                  { Object.keys(this.state.values).map( (index) => {
                      const value = this.state.values[index];
                      return (<div key={ index }>
                        <Bundle>
                          <label> "Name" </label>
                          <InputBox
                            value={ value }
                            onChange={ (event) => this.handleChange( index, event.target.value ) }
                          />
                          {/* <input type="submit"/> */}
                          <input type="submit" value="Submit"/>
                        </Bundle>
                      </div>
                      );
                  })}
              </form>
          </div>
      );
  }
}

export default CreateRecursiveInputBox;

component to render the textbox and repetitive textbox on UI, App.js

import React, { Component } from 'react';
import CreateRecursiveInputBox from './component/CreateRecursiveInputBox.js';

class App extends React.Component {  
    render(){
        return(
          <div>
            <CreateRecursiveInputBox/>
          </div>

        )      
    }   
}
export default App;

I am trying to convert the class based component SubmitCreateRecursiveInputBox.js to a function based component. But it is not working out so far.

Yes, Convert the class based component to function based component, mainly ES6. I can convert some simple class to functional component. This however is just too complicated due to the use of props and state. It just failing now matter how much I try. — everestial007, Oct 03 '21 at 18:05
"Convert this for me" isn't a question. What's the problem? What have you tried? — ray, Oct 03 '21 at 18:06
If I add more detail to the question it will just be more verbose and be ignored. — everestial007, Oct 03 '21 at 18:07
@rayhatfield This is what I have tried, https://stackoverflow.com/questions/69426497/create-a-component-that-repeats-a-passed-component-onclick-or-onsubmit and been trying. I can not put more details than necessary as it is already too long. — everestial007, Oct 03 '21 at 18:10

score 2 · Answer 1 · answered Oct 03 '21 at 18:13

try this :)

App.js

import React from 'react';
import CreateRecursiveInputBox from './component/CreateRecursiveInputBox.js';

export default function App() {
    return (
        <div>
            <CreateRecursiveInputBox />
        </div>
    )
}

CreateRecursiveInputBox.js

import React, { useState } from "react";
import InputBox from "./inputbox.js";

// creating a bundler component
const Bundle = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
`;

export default function CreateRecursiveInputBox() {
    const [values, setValues] = useState({
        values: {
            0: ''
        },
    })

    const handleChange = (index, value) => {
        setValues({
            values: {
                ...values,
                [index]: value
            }
        });
    }

    const handleSubmit = (event) => {
        event.preventDefault();
        setValues({
            values: {
                ...values,
                [Object.keys(values).length]: '' // add new empty item to list
            }
        });
    }

    return (
        <div>
            <form onSubmit={handleSubmit}>
                {Object.keys(values).map((index) => {
                    return (<div key={index}>
                        <Bundle>
                            <label> "Name" </label>
                            <InputBox
                                value={values[index]}
                                onChange={(event) => handleChange(index, event.target.value)}
                            />
                            {/* <input type="submit"/> */}
                            <input type="submit" value="Submit" />
                        </Bundle>
                    </div>
                    );
                })}
            </form>
        </div>
    );
}

How do I convert this ReactJS class based component to function based component?

1 Answers1