CODEWITHSUNDEEP
javascriptreactjsreact-reduxreact-router
bihire boris
bihire boris

Reputation: 1662

How to render parts of a render depending on props reactjs

I am trying to use a switch while rendering parts of a form, however, when I do so, I get an error of e of undefined and when I console.log the inputType prop I get 3 undefined and the actual value. I would appreciate to know what I am doing wrong.

This is the renders I am trying to do a switch into

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Input from '../InputField';
import MultipleInput from '../multipleInput';
import ImageUploader from '../ImageUploader';
import './styles.scss';

const InputMultiple = ({currentState, handleMultpleChange, removeItem})=> (
  <MultipleInput
    value={currentState.services}
    name="services"
    handleMultpleChange={() => handleMultpleChange}
    removeItem={removeItem}
  />
);

const InputImageUploader = ({ setTheState, currentState }) => (
  <ImageUploader
    setState={setTheState}
    urls={currentState.urls}
    files={currentState.files}
    isDragging={currentState.isDragging}
  />
);

const InputTextArea = ({OnChange})=>(
  <div className="accommodation_popup_innerContainer_inputContainer_div1">
    <textarea
      type="text"
      name="description"
      id="description"
      className="input accommodation_popup_innerContainer_inputContainer_div1_inputs"
      onChange={OnChange}
    />
  </div>
);

const InputSingle = ({OnChange})=>(
    <div className="accommodation_popup_innerContainer_inputContainer_div1">
        <Input
            type="text"
            name={name}
            id={labelName}
            className="input accommodation_popup_innerContainer_inputContainer_div1_inputs"
            onChange={OnChange}
        />
  </div>
);

This is the switch and all the props passed along side it


const TypeOfInput = (inputType) => {
  console.log(inputType);
  switch (inputType) {
    case 'InputMultiple': {
      return InputMultiple;
    }
    case 'InputImageUploader': {
      return InputImageUploader;
    }
    case 'InputTextArea': {
      return InputTextArea;
    }

    default: {
      return InputSingle;
    }
  }
};

const LabelInput = ({
  labelName,
  inputType,
  name,
  OnChange,
  currentState,
  setTheState,
  handleMultpleChange,
  removeItem,
}) => (
  <div>
    <div className="accommodation_popup_innerContainer_inputContainer_text">
      <label className="accommodation_popup_innerContainer_inputContainer_text_texts">
        {labelName}
      </label>
    </div>
    {TypeOfInput(
      inputType,
      name,
      OnChange,
      currentState,
      setTheState,
      handleMultpleChange,
      removeItem
    )}
  </div>
);

LabelInput.propTypes = {
  labelName: PropTypes.string.isRequired,
  onChange: PropTypes.func,
};

export default LabelInput;

where I am calling the component

<LabelInput
   labelName="Services"
   name="services"
   inputType="InputMultiple"
   OnChange={this.handleChange}
   handleMultpleChange={() => this.handleMultpleChange}
   removeItem={this.removeItem}
/>

Upvotes: 3

Views: 214

Answers (1)

Barry Michael Doyle
Barry Michael Doyle

Reputation: 10628

This line handleMultpleChange={() => this.handleMultpleChange} in your LabelInput AND MultipleInput components is incorrect.

You need to either call the function in that callback like this: () => this.handleMultpleChange() or set the function to be this.handleMultpleChange. I generally prefer the later since it's shorter.

So do this:

handleMultpleChange={() => this.handleMultpleChange()}

OR:

handleMultpleChange={this.handleMultpleChange}

*PS: it's spelt multiple, not multple

Upvotes: 1

Related Questions