Daftar dan Belajar Sekarang!

Cara mengoper props di beda komponen menggunakan react routes

foto billbert
1 Kontribusi 0 Coto
3 bulan yang lalu
Permisi. Sebelumnya di sini saya membuat 2 komponen React, yaitu login dan welcome. Di login terdapat form input dan button. Ketika form input diisi nama dan button ditekan, maka input user akan muncul di komponen welcome. Di sini saya juga menggunakan React Routes, karena saya menggunakan nav utk login dan welcome. Yang ingin saya tanyakan, bagaimana saya mengambil nilai inputan user dari komponen login ke komponen welcome? Berikut saya sertakan screenshot bagaimana seharusnya program berjalan. https://i.imgur.com/HVdYJVj.jpg https://i.imgur.com/LhYKQno.jpg Berikut saya sertakan juga source code untuk halaman app.js, login.js & welcome.js.
//app.js

import React, { Component } from "react";
import "./App.css";
import { Link, Route } from "react-router-dom";
import Login from "./component/Login";
import Welcome from "./component/Welcome";
// import List from "./List";

class App extends Component {
  render() {
    return (
      <div>
        <nav>
          <a>
            <Link to="/login">Login</Link>
          </a>
          |
          <a>
            <Link to="/welcome">Welcome</Link>
          </a>
        </nav>
        <br></br>
        <div>
          <Route path="/login" component={Login} />
          <Route path="/welcome" component={Welcome} />
        </div>
      </div>
    );
  }
}

export default App;
//login.js

import React, { Component } from "react";

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      res: ""
    };
  }

  handleSubmit = event => {
    event.preventDefault();
    this.setState({
      res: this.state.username,
      username: ""
    });
  };

  handleChange = event => {
    this.setState({
      username: event.target.value
    });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input value={this.state.username} onChange={this.handleChange} />
          <button>Submit</button>
        </form>
      </div>
    );
  }
}

export default Login;
//welcome.js

import React, { Component } from "react";

function Welcome(props) {
  return <h1>Halo (inputan)</h1>;
}

export default Welcome;
Terima kasih.

Jawaban
foto LukiDwianto
19 Kontribusi 1 Coto
3 bulan yang lalu
kalau saya sih perlu pelajari redux. redux itu seperti global state jadi bisa di ambil nilai dari state global itu coba buka link ini React Redux

foto IfanZalukhu
215 Kontribusi 158 Coto
2 bulan yang lalu
Kalau untuk project besar sebaiknya pakai Redux atau Hooks sama seperti yg dijawab di atas. Tapi kalau untuk coba2, itu kan tujuannya mau tampilkan nama di welcome componentnya. Mungkin namanya bisa di set sebagai params url routingnya. Baru nilai params tersebut nanti di ambil di welcome componentsnya. Selengkapnya bisa dilihat disini React Router Pass Param to Component

foto letenote3
1 Kontribusi 0 Coto
2 bulan yang lalu
kalau untuk kasus masnya sih bisa di akalin pake queryString atau pake localstorage mas.. tapi kalau componentnya nanti sudah banyak, bener harus pakai redux

foto kampret1186
3 Kontribusi 2 Coto
2 minggu yang lalu
seperti yang telah di katakan para master diatas mending pake redux dah. ane juga dulu nganggap redux ga penting. cuma ketika ane coba ternyata redux ajib bgt gan. ente bisa update sekali dan dipake berkali2 dari lain-lain component. redux adalah DB untuk frontend gan coba deh..

foto armanrozika
27 Kontribusi 21 Coto
1 minggu yang lalu
Props-nya dipass ke App dulu gan, jadi bikin state nya di App, misalnya mau masukin username, bikin state buat username ini di App.js, begitu pula dengan event handler buat ngubah state nya dibikin di App.
class App extends React.Component{
    state = {
      username: ''
    }
    
    const gantiUserName = (value)=>{
      this.setState({
        username: value
      })
    }

    render(){
      return (
        <Router>
          <Route path='/login' render={(props) => <Login {...props} username={username} gantiUserName={gantiUserName} />}/> 
        
          <Route path='/welcome'render={(props) => <Welcome {...props} username={username}/>}/> 
        </Router>
      )
    }
}
Nanti dari komponen Login agan tinggal handle seperti biasa this.props.gantiUserName(value). Terus dari komponen welcome tinggal baca nilai dari this.props.username. Kalau untuk project kecil, hooks/context bisa jadi alternatif gan, karena nge-track props itu susah, trust me gan, apalagi kalo komponennya beranak pinak, wkwk. Kalau untuk project yang kira-kira skalanya besar dan akan banyak rendering tiap komponennya, bener kata agan-agan sebelumnya, lebih baik pakai state management macam Redux, karena hooks/context itu ngerender semua komponent gak peduli state-nya kepake apa nggak, kalau Redux cuma render pas komponen yang bersangkutan itu memakai state-nya doang :)


Login untuk diksusi di forum sekolah koding