React problem


#1

@mtf can you take a look at challenge with me?

its a react lesson, the challenge tries to reintroduce code from a previous lesson… and it says that i should be looking at a functional component written earlier, but it is a class component…

https://www.codecademy.com/courses/react-102/lessons/proptypes/exercises/proptypes-stateless?action=lesson_resume

Its only 1 step or 1 set of instructions so I want to know if it s a possible bug :bug:


Weekend Reading - 9 Things You Didn’t Know About Firefox Dev Tools
#2
// Normal way to display a prop:
export class MyComponentClass extends React.Component {
  render() {
    return <h1>{this.props.title}</h1>;
  }
}

// Stateless functional component way to display a prop:
export const MyComponentClass = (props) => {
  return <h1>{props.title}</h1>;
}

// Normal way to display a prop using a variable:
export class MyComponentClass extends React.component {
  render() {
    let title = this.props.title;
    return <h1>{title}</h1>;
  }
}

// Stateless functional component way to display a prop using a variable:
export const MyComponentClass = (props) => {
  let title = props.title;
  return <h1>{title}</h1>;
}

The above shows two functional components. How does it compare to your code?


#3

So the challenge begins with

Select GuineaPigs.js.
You can see your GuineaPigs stateless functional component from earlier.

My confusion was that I wasnt seeing a stateless functional component… therefore I needed someone else to see if they experienced the same thing…

it might just be me on my end, i probably never turned it into a stateless function before!


#4

I haven’t pursued Reactjs since completing the module when it first went up last year. Actually pretty dumb when it comes to helping others, so I should have stayed mum. Can we see your code from GuineaPigs.js?


#5

I passed that challenge but i didnt know if it was something i murked myself or browser cache or otherwise :wink:


#6

Would still like to compare your code to mine, if you don’t mind. Wrap it in a spoiler tag so it cannot be copied.

[spoiler]
backticks

code

backticks
[/spoiler]

#7

yeah @mtf see, Im back on the referenced challenge here
https://www.codecademy.com/courses/react-102/lessons/stateless-functional-components/exercises/stateless-functional-component-props?action=lesson_resume
and the step is green but this is in the editor

import React from 'react';

export class GuineaPigs extends React.Component {
  render() {
    let src = this.props.src;
    return (
      <div>
        <h1>Cute Guinea Pigs</h1>
        <img src={src} />
      </div>
    );
  }
}

it needs to be rewritten as a functional component

also resetting the challenge doesnt revert the step (it continues to be green so thats a bit confusing!)

and so here is how I rewrote it

import React from 'react';

export const GuineaPigs = (props) => {
let src = props.src;
   return (
      <div>
        <h1>Cute Guinea Pigs</h1>
        <img src={src} />
      </div>
    );
}

#8

Have you figured out what is meant by stateless?


#9

yeah it is components without state, and they are essentially just plain functions


#10

More precisely, ‘pure’ functions since they do not interact with the outer scope. Something in, something out, and always predictible. At least that’s how I see it.


#11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.