I'm quite new in React and I don't really understand how to make this work. I'm trying to update App.js's user state with the information coming from MediaAPI.js. I've tried to create a method in App component and then call the method from MediaAPI.js with the JSON data in brackets, but it really isn't working. Any help will be greatly appreciated!

App.js

class App extends Component 
 state = 
 user: [],
 ;


 updateUser = (data) => 
 this.setState(user: data);
 ;


 render() 
 return (
 <Router>
 <Nav/>
 <Route exact path="/" component=Login/>
 <Route exact path="/home" render=(props) => (
 <Home ...props picArray=this.state.picArray/>
 )/>
 <Route exact path="/profile" component=Profile/>
 <Route exact path="/single/:id" component=Single/>
 </Router>
 );
 



export default App;

MediaAPI.js

import App from '../App';

 const login = (username, password) => 
 return fetch(loginUrl, 
 method: 'POST',
 headers: 
 'Content-Type': 'application/json',
 ,
 body: JSON.stringify(username, password)
 ).then(response => response.json()).then(json=> 
 console.log(json);
 App.updateUser(json);
 );
;

This way App.updateUser(json); only work when your method is static, and in a static method, you don't have access to this, there are ways to achieve this:

1:

you can use your login function inside you App component like this :

class App extends Component 
 state = 
 user: [],
 ;

 login = (username, password) => 
 return fetch(loginUrl, 
 method: 'POST',
 headers: 
 'Content-Type': 'application/json',
 ,
 body: JSON.stringify(username, password)
 ).then(response => response.json()).then(data=> 
 this.setState(user: data);
 );
 ;


 componentDidMount(data)
 this.login('username', 'password');
 ;


 render() 
 return (
 <Router>
 <Nav/>
 <Route exact path="/" component=Login/>
 <Route exact path="/home" render=(props) => (
 <Home ...props picArray=this.state.picArray/>
 )/>
 <Route exact path="/profile" component=Profile/>
 <Route exact path="/single/:id" component=Single/>
 </Router>
 );
 



export default App;

note:

and also you can simplify the login method by using Async/await like this :

 login = async (username, password) => 
 const response = await fetch(loginUrl,
 method: 'POST', headers: 'Content-Type': 'application/json' ,
 body: JSON.stringify(username, password)
 );
 const user = await response.json();
 this.setState( user );
 ;

note:

and also you can do like this:

import login from 'MediaAPI.js';

class App extends Component 
 state = 
 user: [],
 ;

 async componentDidMount(data)
 const user = await login('username', 'password');
 this.setState( user );
 ;


 render() 
 return (
 <Router>
 <Nav/>
 <Route exact path="/" component=Login/>
 <Route exact path="/home" render=(props) => (
 <Home ...props picArray=this.state.picArray/>
 )/>
 <Route exact path="/profile" component=Profile/>
 <Route exact path="/single/:id" component=Single/>
 </Router>
 );
 



export default App;

MediaAPI.js

 export const login = (username, password) => 
 return fetch(loginUrl, 
 method: 'POST',
 headers: 
 'Content-Type': 'application/json',
 ,
 body: JSON.stringify(username, password)
 ).then(response => response.json());
 ;

2:

you can create a component and on that component use App and set ref to it and then use updateUser method.

---- there are other ways but I think those two are best.

As far as I know, I'd argue your approach is an anti-pattern. Below is how I'd approach it.

import mediaAPI from 'MediaAPI'

class App extends Component 
 state = 
 user: [],
 ;

 // this is a React lifecycle hook that will be
 // called when the component has mounted.
 componentDidMount() 
 mediaAPI()
 .then(res => res.json())
 .then(this.setUserData)
 


 setUserData = (data) => 
 this.setState(user: data);
 ;


 render() 
 return (
 <Router>
 <Nav/>
 <Route exact path="/" component=Login/>
 <Route exact path="/home" render=(props) => (
 <Home ...props picArray=this.state.picArray/>
 )/>
 <Route exact path="/profile" component=Profile/>
 <Route exact path="/single/:id" component=Single/>
 </Router>
 );