selectedByDefault not working with functional components

[naimgarzuzi]

Hi,

I'm facing issue with selectedByDefault when using functional components.
I'm fetching the data using useContext hook, and setting days prop with useEffect, The isSelected dosen't affected in picker.

The isReserved works fine.

[roggervalf]

hi @naimgarzuzi sorry for the delay, could you please share a piece of code to reproduce this

[naimgarzuzi]

Hi @roggervalf ,
This is my code, I'm new in React so there might be some simple code.
But basicly the code is working fine, but the isSelected not worked for me.
Also the code file attached as TXT file

Thanks in advance.
`import { useEffect, useState, useContext } from 'react';
import { AppointmentPicker } from 'react-appointment-picker';

import { DatePickerCalendar } from 'react-nice-dates'
import 'react-nice-dates/build/style.css'
import './Appointments.css'
import { Container, Row, Col } from 'react-bootstrap'
import { getDay } from 'date-fns';
import AppointmentContext from '../Context/AppointmentContext';

function AppointmentsComp() {

const [lodaing, setLoading] = useState(false);
const [date, setDate] = useState(new Date(new Date().setHours(8, 0, 0, 0)));
const [days, setDays] = useState([[]]);

const modifiers = {
disabled: date => getDay(date) === 0 || getDay(date) === 6, // Disables Saturdays
}

const postContext = useContext(AppointmentContext)
const { error, appointments, getAppointments, removeAppointment, addAppointment } = postContext

useEffect(() => {
if (date != null) {
console.log("getting appointments")
setDays([
[
{
"id": 1,
"number": 1
},
{
"id": 2,
"number": 2,
"isReserved": true
},
{
"id": 3,
"number": 3,
"isSelected": true
},
{
"id": 4,
"number": 4
},
{
"id": 5,
"number": 5
},
{
"id": 6,
"number": 6
},
{
"id": 7,
"number": 7
},
{
"id": 8,
"number": 8
},
{
"id": 9,
"number": 9
},
{
"id": 10,
"number": 10
},
{
"id": 11,
"number": 11
},
{
"id": 12,
"number": 12
},
{
"id": 13,
"number": 13
}
]
])
}
}, [date])

// useEffect(() => {
// console.log(appointments)
// if (appointments.length > 0) {
// setDays(appointments)
// }
// }, [appointments])

async function addAppointmentCallbackContinuousCase({
addedAppointment: { day, number, time, id },
addCb,
removedAppointment: params,
removeCb
}) {
setLoading(true)
if (removeCb) {
await removeAppointment({ params });
console.log(
Removed appointment ${params.number}, day ${params.day}, time ${params.time}, id ${params.id}
);
removeCb(params.day, params.number);
}

await addAppointment({ id, number, day, time });
console.log(error)
if (!error) {
  console.log(
    `Added appointment ${number}, day ${day}, time ${time}, id ${id}`
  );
  addCb(day, number, time, id);
}
setLoading(false)

};

async function removeAppointmentCallbackContinuousCase(
{ day, number, time, id },
removeCb
) {
setLoading(true)
let params = { id, number, day, time }
await removeAppointment({ params });
console.log(
Removed appointment ${number}, day ${day}, time ${time}, id ${id}
);
removeCb(day, number);
setLoading(false)

};

return (










);
}

export default AppointmentsComp;
Appointments.txt
`

[roggervalf]

@naimgarzuzi, could you please set it in https://codesandbox.io/, would be easier to take a look

[naimgarzuzi]

@naimgarzuzi, could you please set it in https://codesandbox.io/, would be easier to take a look

@roggervalf , you have edit permission
https://codesandbox.io/s/naughty-frog-sqw1y?file=/src/App.js

[roggervalf]

Nice, I was playing around and it works when dates is not set by setDays, if you just declare the dates variables and just pass it into the react-appointment-picker, it should work

[naimgarzuzi]

I know that changing variable must be with use state, So I declared the setDays for changing the value of the days

Could you please change it in the sandbox to make it work?
I'll take a look after that to see how to do it without changing the state.

Thanks in advance.