Following is my code for Todo component where i am rendering my component named Dynamic component
import React, { Component } from 'react';
import Dynamiccomponent from '../components/ToDo/Todocomponent';
import Navbar from '../components/Nav/Navbar';
import AxiosInstance from './AxiosInstance';
import Axios from 'axios';
import { prototype } from 'stack-utils';
class container extends Component {
state = {
// how i want my data to look with a heading with date proprtey and a description
Todo: {
heading: { type: "text", value: " ", placeholder: 'plese enter heading', name:"heading"},
date: { type: "date", value: " ", placeholder: "plese enter date", name: "date" },
description: { value: " ", placeholder: 'plese enter description', name: "description"}
},
}
// It will be called after total form is loded
componentDidMount(){
AxiosInstance.get('/todos').then((data) =>{
console.log("these is the data you have entered in db",data);
let dataFromServer = data.data.data.map((data) =>{
console.log(data);
Object.keys(this.state.Todo).map((proptype)=>{
this.setState (prevState => {
prevState.Todo[proptype].value = data[proptype]
})
console.log("we are seeing the updated state",this.state.Todo)
})
})
})
}
onChangeHandler = (event) =>{
// declare some varables
let name = event.target.name;
let value = event.target.value;
let updatedTodo = this.state.Todo[name];
console.log(updatedTodo)
//best logic i have seen
this.setState(prevState =>({
Todo: {...prevState.Todo, [name] : {...updatedTodo, value:value}}
}))
console.log(event.value)
this.setState({
[event.target.name] : event.target.value
})
// this.setState({Todo.heading.value: event.target.value })
}
// we are submiting to the server
onSubmitHandler = (event) =>{
console.log("you have succesfully clicked the handler",this.state.Todo.heading.value)
let todoData = { heading: this.state.Todo.heading.value,
date: this.state.Todo.date.value,
description : this.state.Todo.description.value}
console.log("we are seeing the todo here",todoData);
AxiosInstance.post('/newtodo',todoData).then((res) =>{
console.log(res);
})
}
render() {
var dataPassingHandler = () => {
return (
<div>
<Dynamiccomponent todoprop={this.state.Todo} handleChange={this.onChangeHandler} handleSubmit={this.onSubmitHandler}
handleEdit = {this.editHandler} handledelete={this.deleteHandler}/>
</div>
)
}
return (
<div>
<Navbar/>
{dataPassingHandler()}
</div>
)
}
}
export default container;
Following is my code for component where i am checking the type and displaying the data in card import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'
// now created a component
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 from todo component]" , 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} placeholder = {toDoProprties.placeholder} className="card-title" style={{dispay: "block"}}/>
case 'date':
return <input type="date" key="2" value={toDoProprties.value} onChange={props.handleChange} name={toDoProprties.name} placeholder = {toDoProprties.placeholder} className="card-text" style={{display:"block" }}/>
default:
return <textarea rows="4" cols="50" key= "3" value={toDoProprties.value} name= {toDoProprties.name} onChange={props.handleChange} placeholder = {toDoProprties.placeholder} className="card-text" style={{ display: "block"}}/>
}
})
}
return (
<div>
<h1>Hello from component </h1>
{renderdata()}
<div className="card w-75">
<div className="card-body">
<h5 className="card-title">To do list</h5>
<div>
{obj}
<br/>
<button type="submit" onClick={props.handleSubmit} className="btn btn-primary">Submit</button>
<button type="submit" onClick={props.handleEdit} className="btn btn-warning">Edit</button>
<button type="submit" onClick={props.handledelete} className="btn btn-danger">Delete</button>
</div>
</div>
</div>
{console.log(props)}
</div>
);
}
export default component;
1)In the container (class based component ) I have used axios in componentDidMount to get the data and i have changed to componentWillMount (But nothing worked inside my code)
2)In componentDidMount first i got the data and sliced it and changed the state using setSate for conformation i have o/p the changed state
date: {type: "date", value: "2019-09-19", placeholder: "plese enter date", name: "date"}
description: {value: "vrrrrr", placeholder: "plese enter description", name: "description"}
heading: {type: "text", value: "Headinsssssssssssssg", placeholder: "plese enter heading", name: "heading"}
__proto__: Object
My component is rendering first than my container (i can say that by my console.log ) It is not rendering second time when my state is changed i don't why
