React props question

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

If in this example all functions are classes

Do you mean “all components are functional components”?

It doesn’t matter. You send props to child components in exactly the same way whether it is a class or a functional component. The parent component doesn’t know and doesn’t care if the child components are class or functional components.

There is a difference on how they are received. In a class component, there will be a property on the class instance called “props” where you can access them. With a functional component, they are just passed in as the first parameter, which we often arbitrarily call “props”. With your child components you are destructuring that instantly so we never deal with that first parameter directly so the naming is moot.

Here is a pen that is a working example of your code.

Like I said, you are destructuring but would this make it clearer?

const NavBar = ({yourState}) => <p>{yourState}</p>

becomes…

const NavBar = (props) => <p>{ props.yourState }</p>

That is the “more basic” way to do it. Like I said, calling it “props” is arbitrary, but is a very useful and common convention and makes it clear the connection to how class components work.

I’m not saying there is anything wrong with how you used destructuring - that is how I would have done it here - just that I wanted to make clear what is happening.

Thanks, Kevin,

I mean the components which begin with:

export default class ImageUpload extends Component 

You say

const NavBar = (props) => <p>{ props.yourState }</p>

You mean in a component I create a function and use props?

All components in React are functions. You give them an object called props as an argument then you can use that argument in the component code.

There is a way of defining them using class and a way of defining them using function declarations or using function expressions. But these are all effectively the same thing, they’re all just functions, they all take props as a parameter and return some JSX.

class Example extends React.Component {
  render () {
    return (
      <p>Hello {this.props.name}</p>
    );
  }
}

function Example (props) {
  return (
    <p>Hello {props.name}</p>
  );
}

const Example = (props) => (
  <p>Hello {props.name}</p>
);

All the same. Because of how classes work, they have some stuff specific to them (lifecycle methods), whereas with actual functions you get access to the exact same functionality using hooks instead.

All just functions, anyway

Thanks for your answers.
If “we want to change the value of parents prop in a child and give it a new value”, how should do?

As we’ve said several times, if you want to change the state of the parent (which is passed to the child as a prop), then you pass in a callback function. Several times I’ve provided a link to a pen that shows you exactly how to do that. We explain it in this thread is an example of one of those discussions. And here. I seem to remember others. Between threads and PMs, I feel like this has been explained 5-6 times. I suspect that it is not sticking because we are lacking some fundamentals.

I will once again say (with increasing frustration) that I think you need to study some basic JS and React. You keep asking questions that are beyond your grasp at the moment. It’s like you are asking why your race car won’t go faster and we say that you’ve got to push in the clutch and shift gears. And then you ask what those are.

People at FCC have spent hours and hours and hours developing materials to teach you these exact things that you want to do. But you seem to want to just jump into intermediate JS and React and have people swarm around you and answer your questions.

I will say, once again, either do the FCC materials or find something like it. Not only will that be faster and easier, but you have less of a chance of picking up bad habits or incorrect understanding. You can’t learn to fly an airplane by buying an airplane, trying to fly it, and asking for pointers from random strangers. Or maybe you can, but your road to being a great pilot will be much longer (and more dangerous) than it needs to be.

1 Like

Thanks a lot, Kevin,

But I’m doing what you say, reading and reading react while I’m doing my project in VUE.

I’m really interested and trying to learn to react.

I’m not sure how that answers my concerns. And I understand that you want to learn React. I’m suggesting that there is a better and more efficient way to do it.