If we convert these hooks to classes does the code still works?

Hi,

If we convert these hooks to classes does this code still works?

import { useState } from "react";
//the change is reflected in the ImageEditor component
const ImageEditor = ({ yourState }) => (
<p>State in the ImageEditor = {yourState}</p>
);
//ImageTile changes the state through the setYourState method
const ImageTile = ({ yourState, setYourState }) => (
<button onClick={() => setYourState("World!")}>
Change State from the ImageTile
</button>
);
//App is the parent component and contains both image editor and tile
const App = () => {
//the state which holds the image ID is declared in the parent
const [imageId, setImageId] = useState("Hello");
return (
<div>
<ImageTile yourState={imageId} setYourState={setImageId} />
<ImageEditor yourState={imageId} />
</div>
);
};
export default App;

You can see the complete code on:

thank,

Saeed

Hey there @lingo1357!
Yes there shouldn’t be any issue, Class Components and Function Components differ only in syntax, where the latter offer a more compact and eventually shorter code to do the same thing.

You mean I use setState Api?

Yes, transform App to a Class Component and use useState and setState for imageId and setImageId

But my project is classical. How can I turn this to classical?
With this way can I send state from a component to another without initializing in a parent?

I don’t know what you mean with the word classical.

I mean class-based component.

But my project is classical. How can I turn this to classical?

So with this sentence you mean that in your project you’re using some Class Components and this Function Component and you want only have Class Components in your project, correct?

Yes, that’s right. I use class component.

Your code:

const App = () => {
//the state which holds the image ID is declared in the parent
const [imageId, setImageId] = useState("Hello");
return (
<div>
<ImageTile yourState={imageId} setYourState={setImageId} />
<ImageEditor yourState={imageId} />
</div>
);
};

As I told you in my previous answer:

Yes, transform App to a Class Component and use useState and setState for imageId and setImageId

may become something like this:

import React from 'react';
class App extends React.Component {
//the state which holds the image ID is declared in the parent
  constructor(props){
    super(props);
    this.state = {imageId: "Hello"};
  }
  stateChanger(){
    this.setState({imageId: "Bye"})
  }
  render(){
  <div>
    <ImageTile somePropName={this.state.imageId} anotherPropName={this.stateChanger} />
    <ImageEditor howManyPropNames={this.state.imageId} />
  </div>
  }
};

Hope this helps :slight_smile:

When I set a dynamic id for image in ImageTile, does it update automatically in the parent?

As you know I should update the state from ImageTile component in the parent. and then ImageEditor will get this id and use it to open the Image.

This is actually another question for another thread. If someone is also interested in this question it may not find its solution.

Anyway I’ll briefly answer: Yes. If you use setState to change the component state and you have also linked somehow the id attribute of the html img element to said component state then the id will get updated whenever the component state changes.

Cheers,

As you can see in my first post the ImageTile changes the parent state, and the ImageEditor use it.
Sorry for my terrible English :neutral_face:

Chill, English is not my native language either, the important is to understand each other.

as per I can see, ImageTile is a React Component though, not an <img> html element.
You should import ImageTile into App.js and its render function should contain an <img> html element tag with:

id={this.props.yourState}

yourState is the prop you used in your first post, I used somePropName instead, but the concept is the same. You link the html id attribute to the component state.

If this is solved, mark it so please, so I can stairway my way to silver stat :stuck_out_tongue: