0

I am using the popular external React Datepicker NPM package, and I am trying to implemented into Mendix by using it as a pluggable widget. The component works fine, but the only problem I have right now, is when a user selects or changes a date, to send that value back to Mendix. I can read the attribute value, but I don’t know how to to set it to a new Date value. I am using a React Functional component in Javascript (as opposed to a Class Component in Typescript). This is my XML: <property key="listOfReservationDays" type="datasource" isList="true" required="true"> <caption>Reservation Days</caption> <description /> </property> <property key="reservationDate" type="attribute" required="false" dataSource="listOfReservationDays"> <caption>DateTime</caption> <description /> <attributeTypes> <attributeType name="DateTime"/> </attributeTypes> </property>  My Parent Component const ReactCalendar = props => { if (props.listOfReservationDays.status === "available") { return ( <CalendarComponent reservationDays={props.listOfReservationDays} reservationDate={props.reservationDate} /> ); } else { return <div>Loading calendar...</div>; } }; The child component were most of the logic are import { addDays, getDay } from "date-fns"; import { createElement, useState } from "react"; import DatePicker from "react-datepicker"; function CalendarComponent(props) { const [startDate, setStartDate] = useState(new Date()); const onChange = e => { setStartDate(e); props.reservationDate.value(e); }; return ( <div className="form-group"> <DatePicker selected={startDate} onChange={onChange} calendarStartDay={1} className="form-control" dateFormat="dd/MM/yyyy" /> </div> ); } export default CalendarComponent; By using props.reservationDate.value() it displays an error: TypeError: props.reservationDate.value is not a function. How do I set a new value to a Mendix attribute back? Please advise 😥

asked 2021-09-01

1 answers