Passing props to a state to use in a class component

Question

Will preface that I have about 4 weeks of coding experience and so apologies in advance if I'm missing something obvious.

I'm trying to pass an array of objects from Profile.js to Calendar.js, with Calendar.js currently ultimately being returned again in Profile.js. The idea's that a user would be able to set a schedule and be able to see the same schedule when they go back to the profile page. I was trying to get this to work by having the saved array of objects be displayed upon rendering the Calendar.js, but right now it basically resets itself every time the user goes back to the page.

Two issues I'm guessing are relevant here:

1. Initializing this.state to this.props.calendar isn't working (seems like this.props.calendar returns empty during initialization) but when I log this.props.calendar in the handleChange or render() it does show up correctly.
2. I believe handleChange runs whenever the page is clicked and so was thinking there might need to be some way for Calendar.js to display the old saved array of objects instead of an empty array (in case no schedule is selected at the time of click). Was trying to implement some kind of conditional operator here but handleChange currently stops working if it is called while a new empty schedule's selected (so if the user happens to click on the page before selecting a schedule).

This came out to be a bit longer than I expected, but any help would be greatly appreciated!

Calendar.js:

export default class Calendar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      schedule: this.props.calendar
    };
  }

  handleChange = newSchedule => {
    this.setState({ schedule: newSchedule.length !==0 ? newSchedule : this.props.calendar });
    this.props.handleSubmitCalendar(newSchedule); // call API function to save current selected schedule to a database
  }

  render() {
    return (
      <ScheduleSelector
        selection={this.state.schedule}
        ...code...
      />
    )
  }
}

Profile.js:

import Calendar from "../components/Calendar";

export default function Profile() {
  const [calendar, setCalendar] = useState([]);
  useEffect(() => {
    async function onLoad() {
      try {
        const profileCalendar = await loadCalendar();
        setCalendar(profileCalendar);
      } catch (e) {
        onError(e);
      }
    }
    onLoad();
  }, []);

  async function handleSubmitCalendar(calendar) {
    setIsLoading(true);
    try {
      updateCalendar(calendar);
      setIsLoading(false);
    } catch (e) {
      onError(e);
      setIsLoading(false);
    }
  }

  function loadCalendar() {
    return API.get("notes", "/calendar");
  }

  function updateCalendar(calendar) {
    return API.put("notes", "/calendar", {
      body: {calendar}
    });
  }

  return (
    <div className="Calendar">
    <Calendar calendar={calendar} handleSubmitCalendar={handleSubmitCalendar}/>
    </div>
  );
}

Answer 1

Welcome! You should really read the React documentation and go through the examples. Everything you need to known to answer this question is in there and going through it all will make you a more competent developer and save you a lot of headaches. Available here . If you still don't understand once you've gone through the docs, ask again here and I will help you.