1

I creating a react app.

when I am trying to import a component inside header app becomes blank in browser. below is my code

main component

  import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  Nav,
  Navbar,
  Collapse,
  DropdownMenu,
  DropdownItem,
  NavbarToggler,
  DropdownToggle,
  UncontrolledDropdown,
} from 'reactstrap';
import { Link, withRouter } from 'react-router-dom';
import Config from '../../../constants/config';
//import { SidebarNavItems } from '../Sidebar';
import Search from '../search';
import logoImages from '../../../images/logo.png';

require('./styles.scss');

class Header extends Component {
  static propTypes = {
    member: PropTypes.shape({
      firstName: PropTypes.string,
      email: PropTypes.string,
    }),
    logout: PropTypes.func.isRequired,
    history: PropTypes.shape({
      push: PropTypes.func.isRequired,
    }).isRequired,
  };

  static defaultProps = {
    member: {},
  };

  constructor(props) {
    super(props);

    this.toggleDropDown = this.toggleDropDown.bind(this);
    this.state = { isOpen: false };
  }

  onLogout = () => {
    const { logout, history } = this.props;
    logout().then(() => history.push('/login'));
  };

  toggleDropDown = () => {
    const { isOpen } = this.state;
    this.setState({ isOpen: !isOpen });
  };

  render() {
    const { member } = this.props;
    const { isOpen } = this.state;
    const loggedIn = !!(member && member.email);

    return (
      <header className="header_warp">
        <Navbar className="header_inner">
          <div className="logomain">
            <a to="/" className="" style={{ color: '#FFF' }}>
              <img src={logoImages} className="logo" title={Config.appName} alt={Config.appName} />
              <h1>Capture The Moment  <span>A Picture Worth a Thousand Words</span></h1>
            </a>
          </div>
        <Search/>
        </Navbar> 
      </header>
    );
  }
}

export default withRouter(Header);

child component

     import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  Nav,
  Navbar,
  Collapse,
  DropdownMenu,
  DropdownItem,
  NavbarToggler,
  DropdownToggle,
  UncontrolledDropdown,
} from 'reactstrap';
import { Link, withRouter } from 'react-router-dom';
import Config from '../../../constants/config';
import { SidebarNavItems } from '../Sidebar';

import logoImages from '../../../images/logo.png';

require('./styles.scss');

class Search extends Component {
  static propTypes = {
    member: PropTypes.shape({
      firstName: PropTypes.string,
      email: PropTypes.string,
    }),
    logout: PropTypes.func.isRequired,
    history: PropTypes.shape({
      push: PropTypes.func.isRequired,
    }).isRequired,
  };

  static defaultProps = {
    member: {},
  };

  constructor(props) {
    super(props);

    this.toggleDropDown = this.toggleDropDown.bind(this);
    this.state = { isOpen: false };
  }

  onLogout = () => {
    const { logout, history } = this.props;
    logout().then(() => history.push('/login'));
  };

  toggleDropDown = () => {
    const { isOpen } = this.state;
    this.setState({ isOpen: !isOpen });
  };

  render() {
    const { member } = this.props;
    const { isOpen } = this.state;
    const loggedIn = !!(member && member.email);

    return (
      <div className="header_warp">
       fgfdgfd tgrtgr
      </div>
    );
  }
}

export default withRouter(Search);

I updated after importing the child component and attached the new error message. I am using a stater kit to create this app. so some of the component parts already there when I stated. mostly I edited inside the render method. please find the error message below .thanks...

enter image description here

fhei izze
  • 81
  • 2
  • 11

1 Answers1

1

A child component has first to be imported in the parent component in order to be used. To do so:

import Search from '../search';

in the parent component. This will only works if the parent component is in the same folder as the child one, otherwise you have to adapt the path, e.g. :

import Search from './subfolder/search';

Do not put { Search } as it is a default export and not a named export.

Moreover the child component has to be exported as default:

export default Search;

or in your case:

export default withRouter(Search)
Ivo
  • 2,308
  • 1
  • 13
  • 28
  • i tried but this is also not working in console this error showing Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. – fhei izze Aug 08 '18 at 08:44
  • check this import too import { SidebarNavItems } from '../Sidebar'; (remove the { } – Ivo Aug 08 '18 at 08:45
  • Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. this error is showing – fhei izze Aug 08 '18 at 08:52
  • does it says which line ? to know which component, on the first error it was 68 which was your Search component. Also is the component located at '../search/Search'; (one folder up then in search folder then Search component) – Ivo Aug 08 '18 at 08:59
  • Check your code at index.js:68. this si the code – fhei izze Aug 08 '18 at 09:01
  • I updated the main component in question its working. but search is not showing this error message is showing in console.... "Warning: Failed prop type: The prop `logout` is marked as required in `Search`, but its value is `undefined`." – fhei izze Aug 08 '18 at 09:08
  • Search has a logout isRequired prop : logout: PropTypes.func.isRequired, therefor when you create it you need to send a logout function but that is already a different problem. I really advice you following some bginner React class to be able to solve these issues. My answer solved your original issue. Do not hesitate to open new issues if you don't manage to solve. – Ivo Aug 08 '18 at 10:49
  • could you please check the main component we have to remove the index file name from it when importing then only it works, could you please make your answer like that, i mean the import part then I can accept your answer as correct one , thanks.... – fhei izze Aug 09 '18 at 02:59
  • Didn't really understand your last comment, sorry. Did you manage to have it worked ? – Ivo Aug 09 '18 at 08:12
  • yes , please check importing part , I had to remove index js file name from import and i gave only the path name to import then it worked fine. could you please check the main component. i updated the code also its working. you can change the answer like that so I can mark it as right answer – fhei izze Aug 09 '18 at 09:47
  • I still do not understand what you want me to update, my answer was to the point. I don't have your older versions of file, I can only see the latest one you updated so hard for me to follow the changes. – Ivo Aug 11 '18 at 07:28
  • in your answer your pointing folder path and then Js file name such as import Search from './Search'; and import Search from './subcomponent/Search'; but it should not include index js file name . it should be like this import Search from '../search'; my previous file error was also because of that, also I was using index js file name also, new file I removed it and its working fine. I hope you got my point. – fhei izze Aug 11 '18 at 16:40
  • Import can normally include Js file name withotu the js extenstion, that is a normal behaviour of import. If you do not include the js file name but only folder then you can have only one default export per folder. I will correct as per your request though. – Ivo Aug 12 '18 at 05:04