Ошибка с функцией при заходе на localhost React

Question

Ошибка с функцией при заходе на localhost React

Александр Новиков Ученик (21), на голосовании 1 год назад

Делал по гайду из ютуба проект на реакте и блогер вывел функцию в другой файл. После этого ошибка:

 Functions are not valid as a React child. This may happen if you return a Component instead of  from render. Or maybe you meant to call this function rather than return it

Код, в котором вызывается функция:

 import { useState } from 'react'; 
import {cars} from './cars.data'; 
import Car_item_fun from './car_item/cars_item'; 
 
function Home() { 
  const [count, setCount] = useState(0) 
 
  return ( 
    <> 
       
        Cars Catalog
 
 
         
            {/*  */} 
 
            {cars.length ? cars.map( 
                car => <> 
            ) 
         
            : There no cars
 
 
        } 
        
 
     
  ) 
} 
 
export default Home

Код, в котором прописана функция:

 function Car_item_fun ({ car }){ 
    return( 
        car => ( 
             
                                    backgroundImag: `url(${car.img_link})`, 
                }}>
 
 
                {car.name}
 
                {new Intl.NumberFormat( 
                    'ru-Ru', {style: 'currency', currency: 'USD'} 
                ).format(car.price)}n
 
 
                 
            
 
        ) 
    ) 
} 
 
export default Car_item_fun

Answer 1

Dlazder Мудрец (16899) 1 год назад

Во 2 блоке скорее всего ошибка. Зачем обернул все в функцию? В return разметку ставь и все

Александр НовиковУченик (21) 1 год назад

В каком втором блоке?

Dlazder Мудрец (16899) Александр Новиков, блоке кода которые ты скинул. У тебя их два function Car_item_fun ({ car }){ return( <div className = 'car_card' key = {car.id}> <div className = 'honda_civic_img' style = {{ backgroundImag: `url(${car.img_link})`, }}></div> <h3>{car.name}</h3> <h2><b>{new Intl.NumberFormat( 'ru-Ru', {style: 'currency', currency: 'USD'} ).format(car.price)}n</b></h2> <button style = {{ border: 'none', }}>Read more</button> </div> ) } export default Car_item_fun