search

Home  >  Q&A  >  body text

Why can't the compiler read addMore imported from '../addMore/addMore'?

<p>I want to add a component 'addMore', but the compiler doesn't recognize it. What did I miss? please help. </p> <p><br /></p> <pre class="brush:js;toolbar:false;">import React from 'react' import { MdDeleteForever } from 'react-icons/md' import addMore from '../addMore/addMore' import './ShoppingCardItem.css' export default function ShoppingCardItem() { return ( <div className='shoppingCardItem-Container'> <img src="./img/Apfel.jpg" alt="" /> <p>2x Apfel</p> <addMore /> <MdDeleteForever /> </div> ) }</pre> <p><br /></p> <p><br /></p> <pre class="brush:js;toolbar:false;">import React from 'react' export default function addMore() { return ( <div className="btn-group"> <button type="button" className="btn btn-primary"> </button> <button type="button" className="btn btn-primary">-</button> </div> ) }</pre> <p><br /></p>
P粉463824410P粉463824410543 days ago584

reply all(1)I'll reply

  • P粉358281574

    P粉3582815742023-08-18 09:40:32

    Component names must start with uppercase letters. Rename the file name addMore.jsx to AddMore.jsx and also change the import path. To view this information please visit React.dev Functional Components

    // ShoppingCardItem.jsx
    
    import React from 'react'
    import { MdDeleteForever } from 'react-icons/md'
    import AddMorefrom '../AddMore/AddMore'
    import './ShoppingCardItem.css'
    
    
    export default function ShoppingCardItem() {
    
      return (
        <div className='shoppingCardItem-Container'>
            <img src="./img/Apfel.jpg" alt="" />
            <p>2x Apfel</p>
            <AddMore/>
            <MdDeleteForever />
            
        </div>
      )
    }
    // AddMore.jsx
    
    import React from 'react'
    
    export default function AddMore() {
      return (
        <div className="btn-group">
            <button type="button" className="btn btn-primary">+</button>
            <button type="button" className="btn btn-primary">-</button>
        </div>
      )
    }

    reply
    0
  • Cancelreply