How to send props in class component to functional component?

Question

I am beginner to reactjs. need to know how to send the props values in one page to another page. Props are on the first page I can get the class component value how to get the values in another page. Thanks in advance

wallcolor.jsx

import React, { Component } from "react";
import { SketchPicker } from 'react-color';
import WallFactory from "../../wall-factory-3d";
export default class WallColor extends Component {

  constructor(props) {
    super(props);
    this.state = {
        background: '#d3d3d3',
    };
  }

 handleChangeComplete(e){
    this.setState({ background: e.hex },()=>{
        return <WallFactory background={this.state.background}/>
    });
  };

  render() {
    return (
  <SketchPicker color={ this.state.background } onChangeComplete={(e)=>this.handleChangeComplete(e)}  />
  );
  }
}

Another page is wall-factory-3d.js

import  { handleChangeComplete } from "../../components/toolbar/wallcolor";
import * as SharedStyle from '../../shared-style';

 function get_color(props){
   console.log(props.background);
}

I tried this but not get output.

You should go to Redux documentation, It will help you in state management in reactjs. — Deep Kakkar, Feb 18 '20 at 11:52
Both of your classes are called `WallColor` which makes this example weirdly confusing. — TKoL, Feb 18 '20 at 12:17

pope_maverick · Answer 1 · 2020-02-19T04:37:58.450

3

opinion, but this is i would've done it... :)

this.state = {
 background: 'color',
 pickedWall: false,
}

const handleChangeComplete = (e) => {
 this.setState(prevState => ({
  ...prevState,
  pickedWall: true,
  background: e.target.value,
 }))
}

render() {
 const { x, y } = this.props     
 const { background, pickedWall } = this.state
 const { handleChangeComplete } = this

 return <SketchPicker {...{ x, y, background, handleChangeComplete, pickedWall }} />
}

and in your component...

const SketchPicker = ({
 x,
 y,
 background,
 pickedWall,
 handleChangeComplete,
}) => {
 return (
  <div>
   <SomeDiv onClick={(e) => handleChangeComplete(e)}>
    ...your code
   </SomeDiv>
   <Fragment>
    {pickedWall && <WallPicker {...{ x, y, background }} />}
   </Fragment>
  </div>
 )
}

edited Feb 19 '20 at 04:37

answered Feb 18 '20 at 12:29

pope_maverick

902
8
15

Sarath just now updated my code. Can you tell me is this work?. Need to get the values in another page (wall-factory-3d.js). – Manohar tk Feb 18 '20 at 12:36
your code won't work (WallPicker). you are importing the function belongs to another class.. also, i think how you are handling the components are in not proper way. please follow my PATTERN and you will understand how it all works.... your READABILITY is good(i often stumble upon codes which are complicated) yet you have to improve your coding style(refer AIRBNB style guide) also, you are making so many mistakes which i'm not pointing out one by one but disect my code and try to understand and in a while u will code better than me.. regards s.a – pope_maverick Feb 19 '20 at 05:14

score 0 · Answer 2 · answered Feb 18 '20 at 12:19

You could either use React Hooks or any other state management library like Redux, MobX etc.
In React, if there is no immediate relationship(parent-children) between two components you can connect these two with a global state.
A global state in simple words is an object that can be accessed by many components using connectors or Flux technics.

score 0 · Answer 3 · edited Feb 18 '20 at 15:07

Actually your child component will get mounted, as soon as your current component is rendered. So whatever the value after the render will not affect the previously rendered child component.

this.state = {
    backgroundColor: 'aqua';
}

So <WallFactory background={this.state.background}/> will contain aqua.

If you need to pass a different background to the child, pass a function to the child like

<WallFactory getBackgroundColor={this.passbackgroundColor}/>

passbackgroundColor() {
    return this.state.backgroundColor
}

in the child component

const backgroundColor = props.getBackgroundColor();

if you really need this to be dynamic.

How to send props in class component to functional component?

3 Answers3

Linked