Ooker
Ooker•7mo ago

How to send data from a child component to its sibling?

I want create an app with two forms, each form in its own component. Users type in form 1, then the data will be passed to component 2. In there it will join the data of what they type in form 2. How can I do this? Below is the code on my machine, taken from the answer from the same question in Stack Overflow. It works when using React on Stackblitz but I don't get why it's not in my machine: index.jsx 
import Form1 from "../islands/Form1.tsx";
import Form2 from "../islands/Form2.tsx";
import { Form1Provider } from "../islands/Context.tsx";

function App() {
  return (
    <Form1Provider>
      <Form1 />
      <Form2 />
    </Form1Provider>
  );
}
import Form1 from "../islands/Form1.tsx";
import Form2 from "../islands/Form2.tsx";
import { Form1Provider } from "../islands/Context.tsx";

function App() {
  return (
    <Form1Provider>
      <Form1 />
      <Form2 />
    </Form1Provider>
  );
}
Context.js 
import { createContext } from 'preact'
import { useContext, useState } from "preact/hooks";

export const Form1Context = createContext(null);

export function Form1Provider({ children }) {
  const form1State = useState('Form 1 placeholder');
  return (
    <Form1Context.Provider value={form1State}>{children}</Form1Context.Provider>
  );
}
import { createContext } from 'preact'
import { useContext, useState } from "preact/hooks";

export const Form1Context = createContext(null);

export function Form1Provider({ children }) {
  const form1State = useState('Form 1 placeholder');
  return (
    <Form1Context.Provider value={form1State}>{children}</Form1Context.Provider>
  );
}
Form1.jsx 
import { useContext, useState } from "preact/hooks";
import { Form1Context } from './Context.tsx';

export default function Form1() {
  const [form1Data, setForm1Data] = useContext(Form1Context)
    
  return (
    <textarea 
    value = {form1Data} 
    onInput={(event) => setForm1Data(event.target.value)}
    />
  );
}
import { useContext, useState } from "preact/hooks";
import { Form1Context } from './Context.tsx';

export default function Form1() {
  const [form1Data, setForm1Data] = useContext(Form1Context)
    
  return (
    <textarea 
    value = {form1Data} 
    onInput={(event) => setForm1Data(event.target.value)}
    />
  );
}
Form2.jsx 
import { useContext, useState } from "preact/hooks";
import { Form1Context } from './Context.tsx';

export default function Form2() {
  const [form1Data, setForm1Data] = useContext(Form1Context)
  const [form2Data, setForm2Data] = useState('Form 2 placeholder')
    
  return (
    <>
        <textarea 
            value = {form2Data} 
            onInput={(event) => setForm2Data(event.target.value)}
        />
        <p>The value is {form1Data} + {form2Data}</p>
    </>
  );
}
import { useContext, useState } from "preact/hooks";
import { Form1Context } from './Context.tsx';

export default function Form2() {
  const [form1Data, setForm1Data] = useContext(Form1Context)
  const [form2Data, setForm2Data] = useState('Form 2 placeholder')
    
  return (
    <>
        <textarea 
            value = {form2Data} 
            onInput={(event) => setForm2Data(event.target.value)}
        />
        <p>The value is {form1Data} + {form2Data}</p>
    </>
  );
}
The app compiles fine, but the actual result is empty.
Stack Overflow
How to send data from a child component to its sibling?
I want create an app with two forms, each form in its own component. Users type in form 1, then the data will be passed to component 2. In there it will join the data of what they type in form 2. H...
5 Replies
MaDsEn
MaDsEn•7mo ago
In your Form2 component, the line <p>The value is {form1Data} + {form2Data}</p> is not joining the two values properly. Try using curly braces and the + sign outside the string to link the values. See if this works <p>The value is {form1Data + ' ' + form2Data}</p>
Ooker
Ooker•7mo ago
still not working besides that, do you think the code should work?
MaDsEn
MaDsEn•7mo ago
The concept is valid, but Fresh might need another data structure to make it work. I might take a look at it later on.
Ooker
Ooker•7mo ago
https://github.com/denoland/fresh/issues/983
GitHub
unable to use preact context in fresh · Issue #983 · denoland/fresh
I managed to use preactcreateContext hook as the following: hooks/ShoppingCartProvider.tsx export const ShoppingCartContext = createContext({} as ShoppingCart); [...] return ( <ShoppingCartConte...
Ooker
Ooker•7mo ago
I think this is relevant
More Posts
Can Deno list all functions within a script without explicit registration or annotation?. ## For context, here is how you do it for `globalThis`: ```ts Object.getOwnPropertyNames(globalThiTypescript intelisense between jupyter notebooksI've been trying to run jupyter notebooks with deno, but I've noticed that if I create a variable inhow to compress string into stringHow would i go about compressing a string? i need to compress a string but i need the compressed valFresh - Page title to LayoutHi, I have been browsing around the docs and also being new to JSX,I'm not sure what I look for. WhaWhen I use deno run I get this error: error : Permission denied (os error 13)When I use deno run I get this error: error : Permission denied (os error 13) (for '/Users/apple/LibAxios HttpsProxyAgentHello, I tryed to search but found nothing. I'm using axios with httpProxyAgent to proxy my outgoingGet input from an island, make calculus then render ?I have a route with 2 islands inside - one to get input from user - one to render data Once I've goHow can I create a seqential deno task to pass args to child task?Hi, I read the docs and created tasks in `deno.json` like this. https://docs.deno.com/runtime/manualUsing SCSS with FreshHi, I'm starting to get into Fresh for building simple static websites. Right now I want to use my Has anyone used React Material UI with Deno Fresh? Is this possible and also what are the componenetHas anyone used React Material UI with Deno Fresh? Is this possible and also what are the componenet