[解決済み] render から何も返されませんでした。これは通常、returnステートメントがないことを意味します。または、何もレンダリングしない場合は、nullを返します[closed]。

質問

Reactのコンポーネントをindex.jsでインポートしているのですが、このようなエラーが出ています。

renderから何も返されませんでした。これは通常、returnステートメントが不足していることを意味します。または、何もレンダリングしない場合は、nullを返します。

index.jsです。

import React from 'react';
import ReactDOM from 'react-dom'; 
import  Search_Bar from './components/search_bar';

const   API_KEY = 'AIzaSyCnpDObOLiiqN87YKJKZ-cxzdAsvYD1F-U';

const App = () => {
    return
    (
        <div>
            <Search_Bar />
         </div>
    );
}

ReactDOM.render(<App />, document.querySelector('#root'));

コンポーネントを使用します。

import React from 'react';

const Search_Bar = () =>
{
    return <input />;
};

export default Search_Bar;

どのように解決するのですか？

私は、同じ問題が render() メソッドで同じ問題が発生しました。 から戻ったときに問題が発生します。 render() として返すときに起こります。

render() {
    return 
    (
        <div>Here comes JSX !</div>
    );
}

すなわち、改行で括弧を始めると

を使ってみてください。

render() {
    return (
        <div>Here comes JSX !</div>
    );
}

これでエラーは解消されます