0

Hello

I have built an image gallery from a json file. Now the idea is to pick a color with and if it matches one of the color associated in the json file, to rebuild a new list and refresh the page. (of course there is a proximity algorithm which is not the problem yet)

Here is my code for json file :

{
    "images": [
        {
            "name": "1020.jpg",
            "palette": [
                "#b43f45",
                "#1c2c6c",
                "#e5c8c0",
                "#ab6257",
                "#313449",
                "#b1b5c1"
            ],

And the js

import "./App.css";
import myjson from "./refs.json";
import PickColor from "./PickColor";

function App() {
  const images = myjson.images;

  return (
    <div>
      <PickColor />
      <div className="gallery">
        {images.map((index, i) => {
          return <img src={`./images/${index.name}`} key={i} alt="" />;
          <div className="colorBox">palette</div>
        })}
      </div>
    </div>
  );
}

export default App;

I am trying to understand the right methodology before going on

  • Is it better to use a class or a function ?
  • If App is a function, can Pickcolor be a class ?
  • How can I pass information from PickColor.js to the tage div className="gallery"

I am a bit confuse about useState and state comprehension

Thanks for your help

fransua
  • 501
  • 2
  • 18

1 Answers1

1

The difference between react class component and react functional component is you can use react hooks only in functional component.

  1. For your first question you can read this question

  2. For your second question the answer is yes. You can combine react class component and react functional component.

  3. For your third question you can lift the state up. Instead of creating the state in child component you can create the state in parent component and pass the state and setter function using props.

kennarddh
  • 2,186
  • 2
  • 6
  • 21
  • I understand better. So it means when I pick a color in the PickColor Class, if I want to access this information in the function App I must use UseState in App.css ? – fransua Aug 28 '22 at 09:28
  • Yes, or you can use react context instead of prop drilling – kennarddh Sep 02 '22 at 02:22