React passing props to other components-CodePudding

Hello I am having trouble passing props between components. I can't share the exact code so I made a simplified version. I am not getting any console errors, though login is obviously 'undefined' Any insight is appreciated!

App.js

import React, { useState } from "react";


function App() {
  
 
  const [login, setLogin] = useState('Jpm91297');

  const changeState = () => {
    const newLogin = document.getElementById('loginData').value;
    setLogin(newLogin);
  }

  return (
    <>
      <h1>Fancy API Call!!!</h1>
      <form onSubmit={() => changeState()}>
          <input type='text' id='loginData'></input>
          <button>Submit</button>
      </form>
    </>
  );
}

export default App;

Api.Js

import React, {useEffect, useState} from "react";

const Api = ( { login } ) => {
    const [data, setData] = useState(null);
    
    
    useEffect(() => {
        fetch(`https://api.github.com/users/${login}`)
          .then((res) => res.json())
          .then(setData);
      }, []);
    
      if (data) {
        return <div>{JSON.stringify(data)}</div>
      }
    
      return <div>No data Avail</div>

}

export default Api;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Api from './api'

ReactDOM.render(
    <>
    <App />
    <Api />
    </>,
    
   
  document.getElementById('root')
);

CodePudding user response：

You are not preventing the default form action from occurring. This reloads the app.
You should lift the login state to the common parent of App and Api so it can be passed down as a prop. See