locked
react props question RRS feed

  • Question

  • User172056746 posted

    Hello,

    If in this example all functions are classes, how we send the props to two components?

    import logo from './logo.svg';
    import './App.css';
    import { useState } from 'react';
    
    const NavBar = ({yourState}) => <p>{yourState}</p>
    
    const Login = ({yourState, setYourState}) => <button onClick={() => setYourState("world!")}></button>
    
    const App = () => {
      const [yourState, setYourState] = useState('Hello')
      return (
        <div>
          <Login 
            yourState={yourState}
            setYourState={setYourState}
          />
          <NavBar 
            yourState={yourState}
          />
        </div>
      )
    }
    
    export default App;

    regards,

    Saeed

    Saturday, May 1, 2021 1:24 PM

Answers

  • User-474980206 posted

    A parent passes it’s state to a child via props. The child is not allowed to change its parents state, if a child wants to change a parents state then the parent passes a callback to the child that the child can call to change the state. This is fundamental to reacts state management. A child does not need to know how a parent stores it’s state (class instance, hook instance or state library).

    if your application uses a global state manager like redux, then global state is mapped to props and a store action can be called to update global state. In this case the child does not need to know who else is using the state because it’s global.

    function Foo(props) {
          const [myState, setMyState] = useState(0);
    
          return (
             <MyChildComponent myState={myState} updateMyState={setMyState} />
          );
    }

    or

    class Foo extends Component {
      constructor (props) {
        super(props);
        this.state = { myState: 0 };
        this.setMyState = this.setMyState.bind(this);
      }
    
      setMyState (value) {
        this.setState({
          myState: value
        });
      }
    
      render () {
        return (
          <MyChildCompoent myStat={this.state.myState} setMyState={this.setMyState} />
        );
      }
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 7, 2021 7:00 PM

All replies

  • User-474980206 posted

    Normally you would never use hooks with classes, as the point of hooks is to remove the requirement of classes. But you can wrap the hook as a component and use in the class render method.

    https://reacttraining.com/blog/using-hooks-in-classes/

    Saturday, May 1, 2021 3:56 PM
  • User172056746 posted

    Can I create function-based components in react/ASP.net Core templates?

    thanks,

    Tuesday, May 4, 2021 2:25 PM
  • User-474980206 posted

    sure. the code is just sample. the author (c# developer) seems to prefer classes, but there is no reason to stick with them. Thought A good exercise (if you like the template) is to convert from classes to functions.

    example: app.js

    import React, { Component } from 'react';
    import { Route } from 'react-router';
    import { Layout } from './components/Layout';
    import { Home } from './components/Home';
    import { FetchData } from './components/FetchData';
    import { Counter } from './components/Counter';
    import { FileUpload } from './components/FileUpload';
    
    import './custom.css'
    
    export default function App() {
        return (
          <Layout>
            <Route exact path='/' component={Home} />
            <Route path='/counter' component={Counter} />
            <Route path='/fetch-data' component={FetchData} />
            <Route path='/upload' component={FileUpload} />
          </Layout>
        );
    }
    

    and counter.js

    import React, { useState } from 'react';
    
    export function Counter() {
      const [count, setCount] = useState(0);
    
      return (
          <div>
            <h1>Counter</h1>
            <p>This is a simple example of a React component.</p>
            <p aria-live="polite">Current count: <strong>{count}</strong></p>
            <button className="btn btn-primary" onClick={() => setCount(count + 1)}>Increment</button>
          </div>
      );
    }
    

    it should only take a couple minutes a file to convert. 

    hint: fetchData requires a useEffect with dependency.

    Tuesday, May 4, 2021 3:53 PM
  • User172056746 posted

    You mean I should convert all the classes to functions?

    Working class-based components with the function-based components is not possible? just the syntax is different.

    thanks,

    Tuesday, May 4, 2021 9:00 PM
  • User-474980206 posted

    You can mix and match if you want. class based components have a component lifecycle, and functional components use hooks instead. If you want to use hooks as suggested at the start of this thread, then use functional components.

    you do not need to convert the template to functional to add functional components. I think the exercise of converting them teaches functional components use and benefits. The code gets smaller and simpler.

    Wednesday, May 5, 2021 3:03 PM
  • User172056746 posted

    You can mix and match if you want. class-based components have a component lifecycle, and functional components use hooks instead. If you want to use hooks as suggested at the start of this thread, then use functional components.

    In this case, I need a functional parent for my components to initial a state to pass it to a component and then update the state.

    Now this question comes to my mind:

    1. Can I do this? or I should use the main app parent?
    2. How can I do this? (building a parent for the component) Is should be the same as the main parent?
    Thursday, May 6, 2021 10:34 PM
  • User-474980206 posted

    A parent passes it’s state to a child via props. The child is not allowed to change its parents state, if a child wants to change a parents state then the parent passes a callback to the child that the child can call to change the state. This is fundamental to reacts state management. A child does not need to know how a parent stores it’s state (class instance, hook instance or state library).

    if your application uses a global state manager like redux, then global state is mapped to props and a store action can be called to update global state. In this case the child does not need to know who else is using the state because it’s global.

    function Foo(props) {
          const [myState, setMyState] = useState(0);
    
          return (
             <MyChildComponent myState={myState} updateMyState={setMyState} />
          );
    }

    or

    class Foo extends Component {
      constructor (props) {
        super(props);
        this.state = { myState: 0 };
        this.setMyState = this.setMyState.bind(this);
      }
    
      setMyState (value) {
        this.setState({
          myState: value
        });
      }
    
      render () {
        return (
          <MyChildCompoent myStat={this.state.myState} setMyState={this.setMyState} />
        );
      }
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 7, 2021 7:00 PM
  • User172056746 posted

    Thanks a lot. I have been looking for the answer to this question for two months.

    Saturday, May 8, 2021 6:38 PM