I am working with a T-shirt design app using fabric.js in reactjs. I am facing some problem when I wanna change the t shirt color. What I want to do is change T-shirt color from child component but failed to pass data. How can I do this? Child and parent components has been given:
Parent component
export default function Home() {
const [canvas, setCanvas] = useState('');
const initCanvas = () => (
new fabric.Canvas('canvas', {
height: 540,
width: 445,
backgroundColor: "Green",
backgroundImage: "/assets/background_tshirt.png",
}));
useEffect(() => {
setCanvas(initCanvas());
}, []);
return (
<>
<div>
<canvas id='canvas'></canvas>
<Stickers design = {canvas}></Stickers>
<Colors></Colors>
</div>
</>
)
}
Child component
export default function Colors(){
const [value] = useState('');
return(
<div>
<div>
<label for="tshirt-color">T-Shirt Color:</label>
<select value={value} onChange={(canvi)=>{
console.log(canvi.target.value)
}} id="tshirt-color">
<option value="#fff">White</option>
<option value="#000">Black</option>
<option value="#f00">Red</option>
<option value="#008000">Green</option>
<option value="#ff0">Yellow</option>
</select>
</div>
</div>
);
}
Here is my index.js code:
import { fabric } from 'fabric'
import React,{useState, useEffect} from 'react'
import Stickers from '../components/stickers/stickers'
import Colors from '../components/stickers/colors/colors'
function Home(){
const [canvas, setCanvas] = useState('');
const backgroundColor = useState(false);
const initCanvas=()=>(
new fabric.Canvas('canvas', {
height: 540,
width: 445,
backgroundColor:"",
backgroundImage:"/assets/background_tshirt.png",
allowTouchScrolling: true
}));
const sendcolorToParent=(color)=>{
let addColor = color
console.log(addColor)
setCanvas(
new fabric.StaticCanvas('canvas',{
height: 540,
width: 445,
backgroundColor: addColor,
backgroundImage: "/assets/background_tshirt.png",
allowTouchScrolling: true,
})
);
}
useEffect(()=>{
setCanvas(initCanvas());
}, []);
return (
<>
<div>
<canvas id='canvas'></canvas>
<Stickers design = {canvas}></Stickers>
<Colors sendcolorToParent={sendcolorToParent}></Colors>
</div>
</>
)
}
export default Home;
And here is colors.js
import React, { useCallback, useEffect, useState } from "react";
import Home from "../../../pages";
function Colors({sendcolorToParent}){
const [value,setValue,setCanvas] = useState('')
const setState = useState(0);
return(
<div>
<div>
<label htmlFor="tshirt-color">T-Shirt Color:</label>
<select value={value} onChange={(canvas)=>setValue(
sendcolorToParent(canvas.target.value),
)} id="tshirt-color">
<option value="#fff">White</option>
<option value="#000">Black</option>
<option value="#f00">Red</option>
<option value="#008000">Green</option>
<option value="#ff0">Yellow</option>
</select>
</div>
</div>
);
}
export default Colors;
Create a function in the parent component and pass that function as props to child component. Call that function when select is change and pass the value as argument to function