CODEWITHSUNDEEP
javascriptreactjs
Enrico
Enrico

Reputation: 830

react prop not rendering in parent component and even in the same one

I wrote some dummy code in React using two components.

First one:

import React, { Component } from "react";
import Square from "./components/square";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <Square color={this.props.CardStyle} />
      </div>
    );
  }
}

export default App;

Second one:

import React, { Component } from "react";

class Square extends Component {
  render() {
    var CardStyle = {
      height: "200px",
      width: "150px",
      padding: 0,
      backgroundColor: "#FFF",
      filter: "drop-shadow(0px 0px 5px #666)"
    };

    const mera = "merone";

    return (
      <div style={CardStyle}>
        <p>{this.props.mera}</p>
      </div>
    );
  }
}

export default Square;

Now, I would like to render on the p of the Square component its prop "mera", but it does not. Also, I would like to render that passing it to the parent component, App. How can I do it?

Upvotes: 2

Views: 740

Answers (3)

devserkan
devserkan

Reputation: 17608

This answer is just for fun. Accepted answer explaining some useful things like state. If your component's render depends on a changing data, then use it in your state. For other static things of course you can use class properties or variables in your render method.

class Parent extends React.Component {
  outsideRender = "outside of render as a class property";
  render() {
  const insideRender = "inside of render as a constant";
    return (
      <Child
      outsideRender={this.outsideRender}
      insideRender={insideRender}
      />
    )
  }

}


class Child extends React.Component {
  childOutsideRender = "Child's class property outside render";
  render() {
  const childInsideRender = "Child's variable inside render";
    return (
      <div>
      outsideRender: I am coming from parent, as prop and {this.props.outsideRender}
      <br />
      insideRender: I am coming from parent, as a prop and  {this.props.insideRender}
      <br />
      childOutsideRender: {this.childOutsideRender}
      <br />
      childInsideRender: {childInsideRender}
      </div>
    )
  }

}




ReactDOM.render(
  <Parent />,
  document.getElementById("app")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Upvotes: 2

Nick Abbott
Nick Abbott

Reputation: 374

I believe your confusion lies in how to use react props. (Props and components) A prop in react is simply a variable that is passed from the parent to the child. In this case you are looking for a prop 'mera' in your child component 'Square' however you are not passing that down from the parent. If you want to set the value from within your child component you should probably use react state. Otherwise you would pass it down using:

<Square mera={"merone"} color={this.props.CardStyle} />

There are multiple ways to use variables in React.

Props (make sure to pass down the variable):

import React, { Component } from "react";

class Square extends Component {
  render() {
    var CardStyle = {
      height: "200px",
      width: "150px",
      padding: 0,
      backgroundColor: "#FFF",
      filter: "drop-shadow(0px 0px 5px #666)"
    };

    return (
      <div style={CardStyle}>
        <p>{this.props.mera}</p>
      </div>
    );
  }
}

export default Square;

State:

import React, { Component } from "react";

class Square extends Component {

  state = { mera: "merone" };

  render() {
    var CardStyle = {
      height: "200px",
      width: "150px",
      padding: 0,
      backgroundColor: "#FFF",
      filter: "drop-shadow(0px 0px 5px #666)"
    };

    return (
      <div style={CardStyle}>
        <p>{this.state.mera}</p>
      </div>
    );
  }
}

export default Square;

Scoped variables:

import React, { Component } from "react";

class Square extends Component {
  render() {
    var CardStyle = {
      height: "200px",
      width: "150px",
      padding: 0,
      backgroundColor: "#FFF",
      filter: "drop-shadow(0px 0px 5px #666)"
    };

    const mera = "merone";

    return (
      <div style={CardStyle}>
        <p>{mera}</p>
      </div>
    );
  }
}

export default Square;

Class properties (WILL NOT rerender the component when modified):

import React, { Component } from "react";

class Square extends Component {

  mera = "merone";

  render() {
    var CardStyle = {
      height: "200px",
      width: "150px",
      padding: 0,
      backgroundColor: "#FFF",
      filter: "drop-shadow(0px 0px 5px #666)"
    };

    return (
      <div style={CardStyle}>
        <p>{this.mera}</p>
      </div>
    );
  }
}

export default Square;

Upvotes: 4

Tyler Sebastian
Tyler Sebastian

Reputation: 9458

mera is not a prop, it's a const in Square. Move const mera = "merone" to your App component, and pass it in as a prop <Square mera={mera} .../>

Upvotes: 4

Related Questions