javascript - React Maximum Callstack when adding component -

i have list component getting information local json file if following works expected.

import react 'react'; import casestudies './case-studies.json';  import casestudyitem './case-study-list';  const casestudylist = () => {      const casestudyitems = casestudies.map( casestudy => {         console.log(casestudy);         return (             <div key={casestudy.name}>{casestudy.name}</div>         );     });       return (         <ul>             {casestudyitems}         </ul>     ); }  export default casestudylist; 

the expected number of case studies printed out no problem.

if replace div inside of casestudies.map statement following

<casestudyitem key={casestudy.id} casestudy={casestudy} /> 

i "maximum callstack size exceed error" if add log statement in there shows spitting out hundred , hundreds of items. cause this?

in case needed here casestudyitem component, blank testing purposes.

import react 'react';  const casestudyitem = () => {      return (         <div>case study</div>     ); }  export default casestudyitem; 

i think making new casestudylists inside each casestudylist. because (probably) import wrong file:

import casestudyitem './case-study-list'; 

should perhaps be

import casestudyitem './case-study-item'; 

when import this, can name imported variable whatever want, though casestudyitem component creator casestudylist component creator.