Rendering a form dynamically in react

Question

I have written functional based component i am checking the type in the switch case ,depending on the type i am creating the form here

const component = (props) => {
    let renderObject = null
    let obj;
    const renderdata = () =>{
        console.log(props);
        obj = Object.keys(props.todoprop).map((todoproprties) =>{
            console.log("here we are looking at the data" , props.todoprop[todoproprties])
            let toDoProprties = props.todoprop[todoproprties]
             switch(props.todoprop[todoproprties].type){
                 case 'text':
                     return <input type="text"  key="1"  value={toDoProprties.value}  name = {toDoProprties.name} onChange={props.handleChange} />
                 case 'date':
                     return  <input type="date" key="2" value={toDoProprties.value}  onChange={props.handleChange}/>
                 default:
                    return <textarea rows="10" key="3" cols="30"  rows="10" cols="30"   value={toDoProprties.value} onChange={props.handleChange}/>

             }

        })
    }


    return (
        <div>
            <h1>Hello from component </h1>
            {renderdata()}
            <div className="card">
             <div className="card-body">
              <div>
              {obj}
              <button type="submit" onClick={props.handleSubmit}>Submit</button>
              </div>
             </div>
             </div>
            {console.log(props)}

        </div>
    );

    }
export default component;

Below is the container in which am rendering my component

class container extends Component {
    state = {
        // how i want my data to look  with  a heading with date proprtey and a description
        heading: '',
        date: '',
        description: '', 
        Todo: {
            heading: { type: "text", value: "", placeholder: 'plese enter heading', name:"heading"},
            date: { type: "date", value: "", placeholder: "plese enter date", name: "date" },
            description: {  value: "PLESE DESIGN A GOOD TODO",  placeholder: 'plese enter description',  name: "description"}
        }
    }

    onChangeHandler = (event) =>{
        console.log(event.value)
        this.setState({
            [event.target.name] : event.target.value
        })
        // this.setState({Todo.heading.value: event.target.value })
    }

    onSubmitHandler = () =>{

        console.log("you have succesfully clicked the handler")
        console.log("you are seeing the state" ,this.state.heading);
        console.log("you are seeing the description", this.state.description)
    }

    render() {
        var dataPassingHandler = () => {
            return (<div>
                <Dynamiccomponent  todoprop={this.state.Todo}   handleChange={this.onChangeHandler}  handleSubmit={this.onSubmitHandler}/>
            </div>
            )
        }

        return (
            <div>
                {dataPassingHandler()}
            </div>
        )
    }
}


export default container;

1) In my container i am rendering the component and i am passing the type to the container and i am checking in the switch case i am creating the form

2) I am stuck here with two problems First one is how to pass the onChange ,

3) Second how to handle the onclick and create a new object in state of the container

Why do you have complex Todo state? Can't you directly have Todo array? — ravibagul91
– ravibagul91, Commented Sep 21, 2019 at 16:01
yes but i want to learn (i am new to react ) in first try i used array next i want to give a try how to extract data if object type is given then i continued with the flow (i forgot to change i taught it 's working and continued ) — m.d venkatesh
– m.d venkatesh, Commented Sep 21, 2019 at 16:07
Anything is okay i just want know how to add state of the todo dynamically and make onChange work — m.d venkatesh
– m.d venkatesh, Commented Sep 21, 2019 at 16:08

ravibagul91 · Accepted Answer · 2019-09-21 16:21:33Z

1

You are not able to type in, because you have binded the value from Todo object,

<input type="text"  key="1"  value={toDoProprties.value}  name = {toDoProprties.name} onChange={props.handleChange} />

But you are not changing value in Todo object here,

onChangeHandler = (event) =>{
    console.log(event.value)
    this.setState({
       [event.target.name] : event.target.value
    })
    // this.setState({Todo.heading.value: event.target.value })
}

The above change handler is only changing state variable, which is directly available in state. But you need to change the value in Todo object, you can do this way,

onChangeHandler = (event) => {
   //let's take name and value in a variable so that it can be accesiable in complex state updation
   let name = event.target.name;
   let value = event.target.value;

   //This is the object from Todo which needs to be updated
   let updatedTodo = this.state.Todo[name];

   //this is the functional setState, which take's previous state value to calculate the next state
   this.setState(prevState => ({
       Todo: { ...prevState.Todo, [name]: {...updatedTodo, value: value} }
   }))
}

Now your input's are fully controlled and you can type in.

Also you need to make some change's in your Dynamiccomponent. For the changes you can compare your code with this demo,

Demo

Note: Take some note's here.

In react component name should be in PascalCase. For example, Dynamiccomponent should be DynamicComponent, container should be Container and so on.
In your component where you have created your dynamic input's, you should provide name to every input / texteare so that your onChange handler work smoothly.

answered Sep 21, 2019 at 16:21

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

ravibagul91 Over a year ago

@venkatesh, just understand how functional setState work. You can search on internet.

m.d venkatesh Over a year ago

Thanks it is working but i if i change once the onchange all the three i can see in the console.log i think i missed something can you plese help me or i am in the correct path

ravibagul91 Over a year ago

@m.dvenkatesh, instead of this.state.Todo.proptype you should use this this.state.Todo[proptype]. Here prototype is dynamic key, and dynamic key is needs to be accessed using [].

m.d venkatesh Over a year ago

yes but from another account because they blocked these account i will give you the link

m.d venkatesh Over a year ago

Got it i am not returning (means not saving )the state after updating(in this.SetState) so the component is not rendering

|

Collectives™ on Stack Overflow

Rendering a form dynamically in react

1 Answer 1

15 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related