Converting Component This.state with mapped value-CodePudding

I'm converting a class-based component into a function. Part of it is below:

export default class Task extends Component {
    constructor(props) {
        super(props);
        this.onChangeTitle = this.onChangeTitle.bind(this);
        this.onChangeDescription = this.onChangeDescription.bind(this);
        this.onChangeDate = this.onChangeDate.bind(this);
        this.getTask = this.getTask.bind(this);
        this.updateCompleted = this.updateCompleted.bind(this);
        this.updateTask = this.updateTask.bind(this);
        this.deleteTask = this.deleteTask.bind(this);

        this.state = {
            currentTask: {
                id: null,
                title: "",
                description: "",
                completed: false,
                startDate: new Date(),
            },
            message: ""
        };
    }

I know to convert all of the binding lines into const lines instead. But I'm not sure how to handle the conversion with currentTask being a mapped set of other values. How do I depict that in a function?

CodePudding user response：

do you mean functional component or function? If you want to convert this into a functional component you can use useState hook to store currentTask like this const [currentTask, setCurrentTask] = useState({ id: null, title: "", description: "", completed: false, startDate: new Date() }); https://reactjs.org/docs/hooks-state.html more about useState hook

CodePudding user response：

In your functional component you have to use useState hook for your currentTask. Like this-

const [currentTask, setCurrentTask] = useState({ id: null,
  title: "",
  description: "",
  completed: false,
  startDate: new Date(),
})