CODEWITHSUNDEEP
javascriptreactjsstatereact-props
sarcouilleizi94
sarcouilleizi94

Reputation: 265

React - State from class to hook

i don't understand something.

From my parents class, i give state to my children class like this :

<TrainingArea
   getHtmlGrain={() => this.getHtmlGrain()}
   right={this.state.right}
   grain_language={this.state.lang}
   id_grain={this.state.grain[this.state.currentGrain]}
   skinPath={this.state.training.skin_path}
   selectedBlock={this.state.selectedBlock}
 />

and before to take the 'props' in the children class i use this this :

this.props.skinPath

but now, i don't understand how i can take this props in a 'hook class react'. Or is not possible? my parent class look like this :

import TrainingArea from '../Blocks/General/TrainingArea'

class BlockPage extends Component {

state = {
//some state
}

 render() {
   return (
      <TrainingArea
       getHtmlGrain={() => this.getHtmlGrain()}
       right={this.state.right}
       grain_language={this.state.lang}
       id_grain={this.state.grain[this.state.currentGrain]}
       skinPath={this.state.training.skin_path}
       selectedBlock={this.state.selectedBlock}
     />
   )}

How I'm using it in my child class :

const TrainingArea = (props) => {
    console.log(props.skinPath)
    return (
       <h1>hi</h1>
    )
}

useEffect(()=> {
    TrainingArea()
})

Can someone help me? thx a lot

Upvotes: 1

Views: 74

Answers (4)

Jyotsna maurya
Jyotsna maurya

Reputation: 66

susppose you have a parent class like this

class Parent extends React.COmponent {
  constructor(props) {
    super(props)
    this.state = {
      // some state data
    }
  }
  render() {
    return(
      <TrainingArea
        getHtmlGrain={() => this.getHtmlGrain()}
        right={this.state.right}
        grain_language={this.state.lang}
        id_grain={this.state.grain[this.state.currentGrain]}
        skinPath={this.state.training.skin_path}
        selectedBlock={this.state.selectedBlock}
      />
    );
  }
}

and in child component you want some data from props using this

const TrainingArea = (props) => {
   console.log(props.skinPath)
   return (
     // render JSX 
   )
}

Upvotes: 0

Kelvin Schoofs
Kelvin Schoofs

Reputation: 8718

You basically go from this:

class MyComponent extends React.Component {
    render() {
        const prop = this.props.prop;
        const someState = this.state.someState;
        // ...
        return <button onClick={() => this.setState({ someState: 'state' })}>Example</button>;
    };
}

to this:

function MyComponent(props) {
    const prop = props.prop;
    const [someState, setSomeState] = React.useState();
    // ...
    return <button onClick={() => setSomeState('state')}>Example</button>;
}

Upvotes: 3

Marco Nisi
Marco Nisi

Reputation: 1241

Yes it is possible. In your functional component you can access to the provided props as function parameters. For example you can do something like this:

const FunctionalComponent = (props) => {
  console.log(props.skinPath)
}

Upvotes: 0

sarcouilleizi94
sarcouilleizi94

Reputation: 265

I use something like this for take the props

const skin= (props) => {
    const [skin, setskin] = useState([...props.skinPath])
}

Upvotes: 0

Related Questions