Postingan lainnya

Cara mengoper props di beda komponen menggunakan react routes

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.

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.

reactjs

@billbert

1 Kontribusi 0 Poin

Diperbarui 3 tahun yang lalu

5 Jawaban:

kalau saya sih perlu pelajari redux. redux itu seperti global state jadi bisa di ambil nilai dari state global itu coba buka link ini <a href='https://react-redux.js.org/'>React Redux</a>

@LukiDwianto

19 Kontribusi 1 Poin

Dipost 4 tahun 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 <a href='https://stackoverflow.com/questions/45898789/react-router-pass-param-to-component/51791300'>React Router Pass Param to Component</a>

@IfanZalukhu

217 Kontribusi 158 Poin

Dipost 4 tahun 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

@letenote3

1 Kontribusi 0 Poin

Dipost 4 tahun 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..

@kampret1186

3 Kontribusi 2 Poin

Dipost 3 tahun 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.

<pre> class App extends React.Component{ state = { username: '' }

const gantiUserName = (value)=&amp;gt;{
  this.setState({
    username: value
  })
}

render(){
  return (
    &amp;lt;Router&amp;gt;
      &amp;lt;Route path=&#039;/login&#039; render={(props) =&amp;gt; &amp;lt;Login {...props} username={username} gantiUserName={gantiUserName} /&amp;gt;}/&amp;gt; 
    
      &amp;lt;Route path=&#039;/welcome&#039;render={(props) =&amp;gt; &amp;lt;Welcome {...props} username={username}/&amp;gt;}/&amp;gt; 
    &amp;lt;/Router&amp;gt;
  )
}

} </pre>

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 :)

@armanrozika

29 Kontribusi 23 Poin

Dipost 3 tahun yang lalu