Error in my react app file - module not found can't resolve

Question

Error:

Compiled with problems:X

ERROR in ./src/App.js 8:0-63

Module not found: Error: Can't resolve '.src/components/NewsCards/NewsCards.js' in '/Users/admin/Desktop/ALAN_AI_NEWS APP/myaiproject/src'

ERROR

src/App.js
  Line 7:45:  'useState' is not defined  no-undef

Search for the keywords to learn more about each error.

Code:

import React, { useEffect } from 'react';
import alanBtn from '@alan-ai/alan-sdk-web';
import NewsCards from '.src/components/NewsCards/NewsCards.js';
const alanKey = '0f881486602df260f78c6dd18ef0cc6e2e956eca572e1d8b807a3e2338fdd0dc/stage';

const App = () => {
    const [newsArticles, setNewsArticles] = useState ([]);

    
    useEffect(() => {
      alanBtn({
            key: alanKey,
            onCommand: ({ command, articles}) => {
                if(command === 'newHeadlines') {
                   setNewsArticles(articles);
                 // Call the client code that will react to the received command
                }
            }
        })
    }, [])
   

    return (
        <div>
            <h1>Alan AI News Application</h1>
            <NewsCards articles={newsArticles} />
        </div>
    );
}

export default App;



Attached code above, pelase help solve this error

Answer 1

Please import useState hook as well

import React, { useEffect, useState } from 'react';
import alanBtn from '@alan-ai/alan-sdk-web';
const alanKey = '0f881486602df260f78c6dd18ef0cc6e2e956eca572e1d8b807a3e2338fdd0dc/stage';

function NewsCards(props) {
  return (
    <div>
        // your component content
    </div>
  )
}

export const App = (props) => {
    const [newsArticles, setNewsArticles] = useState([]);

    useEffect(() => {
      alanBtn({
            key: alanKey,
            onCommand: ({ command, articles}) => {
                if(command === 'newHeadlines') {
                   setNewsArticles(articles);
                 // Call the client code that will react to the received command
                }
            }
        })
    }, [])

    return (
        <div className='App'>
            <h1>Hello React.</h1>
            <NewsCards articles={newsArticles} />
        </div>
    );
}