React - Review Using Props with Stateless Functional Components

JavaScript
1

Tell us what’s happening:
so, i actually solved this but, i kinda did it like a blind man walking through a room… if you ask me how it reads… and why the way it reads works… heck… if I asked ME … i wouldn’t be able to answer… in all likelihood, if i erased my solution… i might find myself having to blindly fumble across the “room” again… Im going to continue to move on from here but my feeling is im going to need some help with the props stuff

ex: const Camper = props => <p>{props.name}</p>

as simple as this is once i wrote it… it took a whiiiile longer than i guess i think it should have to come up with…

once again… not quite sure what im asking but im hoping ive placed down enough context for someone to have “been where i am”

Your code so far

class CampSite extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Camper/>
      </div>
    );
  }
};
// Change code below this line
const Camper = props => <p>{props.name}</p>

Camper.defaultProps = {
  name: "Johnny" 
}

Camper.propTypes = {
  name: PropTypes.string.isRequired
}

Challenge: React - Review Using Props with Stateless Functional Components

Link to the challenge:

2

Don’t worry, React is weird when you first learn it. It is totally expected. The phrase React-brain has been coined for a reason.

It can help if you ignore React for a bit and just think of it as JavaScript. A function component is just a function. You have the function definition (component definition) and you have the function invocation (where the component is used/rendered). You can think of the default props as default parameter values.

function parent(props) {
  return child(props);
}

function child(name = 'John Doe') {
  return name;
}

// "render"
console.log(parent()) // 'John Doe'
console.log(parent('Jack')) // 'Jack'
1 Like
4

like a function with a function call in the return… sort of?
and then a function calling the above function to return the value of the returned function as the creation of its own?
…or something

please help me get my brain and its train to its station :grinning: :melting_face: :woozy_face: :face_with_diagonal_mouth: :pray:

5

Well, close enough. There is definitely a bit of an inception-type thing going on.

But yes, it basically just functions calling functions all returning something (JSX) until it all gets rendered and put into the DOM.

Just give it some time, it will get less weird to think about.

1 Like