Trying to re-use a component and make a property conditional

Question

I am using React Datepicker on my application. By default, I want to use the "inline" feature so the calendar is always showing when the page loads. I am accomplishing that like this:

<DatePicker
    inline
    selected={ startDate }
    onChange={ onChange }
/>

I am passing the startDate and onChange properties from my App.js file.

Everything is working great.

Next I would like to have my second page use the same component - because that seems like a logical thing to do. But, I want the calendar to only be triggered if the input is clicked. I am passing whatever date was selected to the next page, so the text field is populated with mm/dd/yyyy.

I want to give the user the option to choose a different date, so if they click the input, the calendar renders. In which case I do not want the inline property on the component.

I've tried something like this with no luck:

<DatePicker
    inline={ inline }
    selected={ startDate }
    onChange={ onChange }
/>

Passing inline in as true or false. But that doesn't seem to work. Or, does it make better sense to just use two different components here? Obviously I am pretty new to react development so maybe I'm just trying to do too much with the same thing when creating two components would be just as easy.

Thank you for any suggestions!

EDIT

Thank you for your suggestions! I have found that this works:

App.js

 this.state = {
     inline: 'inline',
     startDate: new Date(),
      ...
}

<ReservationCalendar
    inline={ this.state.inline }
    startDate={ this.state.startDate }
    onChange={ this.handleChange }
 />

ReservationCalendar.js

const ReservationCalendar = ({inline, startDate, onChange}) => (
    <div>
        <Calendar
            inline={ inline }
            startDate={ startDate }
            onChange={ onChange }/>
   </div>
);

Calendar.js

const Calendar = ({inline, startDate, onChange}) => (
    <div>
        <DatePicker
            inline={ inline }
            selected={ startDate }
            onChange={ onChange }
        />
    </div>
);

On "page 2" I want to have something like this:

const Calendar = ({inline, startDate, onChange}) => (
    <div>
        <DatePicker
            inline={ false }
            selected={ startDate }
            onChange={ onChange }
        />
    </div>
);

Obviously, that isn't the correct syntax, but I want to set inline to false/remove that prop. I'm not sure where/how to set that - at the lower component level.

Answer 1

You definitely don't want to create separate components just because one has an additional prop set, make the props configurable and deconstruct them into the component e.g.

const props = {
  inline: // true / false, some conditional check,
  selected: startDate,
  onChange
};
...
<DateTimePicker {...props} />;

This should render the inline attribute if true and not at all if false.