1

I have the following structure:

  • Folder 1
    • Subfolder 1
      • File.jsx
  • Folder 2
    • Subfolder 2
      • Subfolder 2
        • File.jsx

When passing a boolean as props from the file of Folder 1 to the file in Folder 2, I get undefined. My component from folder 2 is imported in folder 1, so it should work. Any ideas without using Redux will be highly appreciated.

Component from Folder 1:

import React from 'react';
import { useAppContext } from 'fusion:context';
import Image from '../../image/default';
import './style.scss';

const Headline = () => {
  const appContext = useAppContext();
  const { globalContent } = appContext;

  return (
    <div className="article-headline text-align">
      <div className="article-headline-body">
        <h3>{globalContent.headlines.basic}</h3>
      </div>
      <Image isFeatured />
    </div>
  );
};

export default Headline;

Component from Folder 2:

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import './default.scss';

const Image = ({ src, global, isFeatured }) => {
  // console.log(global);


  console.log('is featured', isFeatured);

  /* some unrelated code */


}

Image.propTypes = {
  src: PropTypes.any,
  global: PropTypes.any,
  isFeatured: PropTypes.any,
};

export default Image;
ilkovs
  • 436
  • 1
  • 3
  • 14
  • `` should be setting `isFeatured` to true surely? – andy mccullough Dec 16 '19 at 16:37
  • Even when I pass a variable that's set to true it's still undefined in Folder 2. I read an article somewhere that for booleans you don't really have to set it to true when passing it since it's automatically true. – ilkovs Dec 16 '19 at 16:41
  • It's not "undefined in 'Folder 2'", it's undefined in the component. The location of a component's source does not matter (assuming all imports are correct, which it seems like they are). Are the other parameters working? Does it work without `proptypes` being set? There's no particular reason it shouldn't work, e.g., https://stackoverflow.com/q/39326300/438992 – Dave Newton Dec 16 '19 at 17:18
  • Everything else is working as it should. I tried passing this.props.isFeatured as well, still undefined. – ilkovs Dec 16 '19 at 17:28
  • When console logging the props, isFeatured doesn't exist even. It's not reaching the unrelated component. – ilkovs Dec 17 '19 at 14:56

1 Answers1

1

PropTypes.any will return undefined instead of false both in javascript will goes to false but you could set a default value or set PropTypes.any to PropTypes.boolean instead

Potato
  • 770
  • 1
  • 8
  • 18