Search code examples
javascriptreactjsimporterrores6-class

Module not found: Can't resolve 'persons' in 'D:\Learning programing\Javascript....' error in React

i have landed to this error in react Module not found: Can't resolve 'persons' in 'D:\Learning programing\Javascript...'when i was trying to split my components into much smaller ones for better management in my learning project and i really need some help The main app Component with the state App sends the props to a component called Persons (every event handler is catered for)

if (this.state.showPersons) {
  persons = (
    <div>
      <Persons
        persons={this.state.persons}
        click={this.handleDelete}
        changed={this.handleChange}
      />
    </div>
  );

the Persons then maps the props and send them to a child component called Person

import React from "react"
import Person from "persons"

const Persons = (props) =>
    props.persons.map((person, index) => {
        return (
          <Person
            key={person.id}
            name={person.name}
            age={person.age}
            profession={person.profession}
            changed={(event) => props.changed(event, person.id)}
            click={() => props.click(index)}
          />
        );
      } )
export default Persons

then the person displays individual person

import React from 'react';

import './Person.css';

const Person = ( props ) => {
    return (
        <div className="Person">
            <p onClick={props.click}>I'm {props.name} and I am {props.age} years old!</p>
            <p>I am a qualified {props.profession} </p>
            <p>{props.children}</p>
            <input type="text" onChange={props.changed} value={props.name} />
        </div>
    )
};

export default Person;

All the imports that i have written are from apps to child

main App file

import React, { Component } from "react";
import "./App.css";
import Person from "../componemts/Persons/Person/Person";
import Persons from "../componemts/Persons/persons"

persons js file

import React from "react"
import Person from "persons"

person js file

import React from 'react';
import './Person.css';

Honestly am confused am not sure what am doing wrongthe folder structure of the code

Solution

  • persons.js is placed in the componemts directory, not componemts/Person. Move it or change the import.