Question 74508 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to add properties of one component to another – Reactjs

if Component0 has Component1 and Component2,

In Component1, there is a useState which creates items as a

  • tag wrapped in

    useState has properties as: id, title, array(of type array)

    When a

  • in component1 is clicked, I want to show its title and array in Component2

    This is my first time asking a question online, for more details I have explained it in the readme file of the GitHub link

    I had once got it, but later messed up everything. Don’t know what to do

    • Tags:

    3

    Answers


    1. 0

      If I understood correctly,
      you can declare your state in parent component (component0) and then pass state and setState to both components (component 1 and 2) as props.
      (It’s not the best way but it works)

      Login or Signup to reply.
    2. 0

      Hope you find the below answer useful 🙂

      Patterns component

      import React, { useState } from "react";

interface PatternsProps {
    handleChange: (title: string, instructions: string[]) => void
}

export const Patterns = ({ handleChange }: PatternsProps) => {
    const [items] = useState([
        { id: 1, text: 'Checker Board', array: ['a', 'R', '..']},
        { id: 2, text: 'Checkerboard Cube', array: ['b', 'R', 'l', 'r'] },
        { id: 3, text: 'Plus Minus', array: ['c', 'R', 'r'] },
        { id: 4, text: 'Gift Box', array: ['d', 'R', 'd'] },
        { id: 5, text: 'Cross', array: ['e', 'R', '..'] },
        { id: 6, text: '4 Crosses', array: ['f', 'R', '..'] },
        { id: 7, text: 'Cube in Cube', array: ['g', 'R', '..'] },
        { id: 8, text: 'Cube in Cube in Cube', array: ['h', 'R', '..'] },
        { id: 9, text: '4 Spots', array: ['i', 'R', '..'] },
        { id: 10, text: '6 Sopts', array: ['j', 'R', '..'] }
    
    ]);

    return (
        <div>
            <p>Patterns</p>
            <ul>
                {items.map((item) => (
                    <li key={item.id} onClick={() => handleChange(item.text, item.array)}>
                        <a>{item.text}</a>
                    </li>
                ))}
            </ul>
        </div>
    )
}

      Parent component

      import React, { useState } from "react";
import { Output } from "./Output";
import { Patterns } from "./Patterns";

export const Parent = () => {

    const [title, setTitle] = useState<string>("");
    const [instructions, setInstructions] = useState<string[]>([]);

    const handleChange = (title: string, instructions: string[]) => {
        setTitle(title);
        setInstructions(instructions);
    }

    return (
        <main>
            <div>
                <Patterns handleChange={handleChange} />
            </div>
            <div>
                <Output title={title} instructions={instructions} />
            </div>
        </main>
    )
}

      Output component

      import React from "react";

interface OutputProps {
    title: string,
    instructions: string[]
}

export const Output = ({title, instructions}: OutputProps) => {
    return (
        <div>
            <div>
                <p>{title}</p>
            </div>
            <div>
                {
                    instructions.map((inst) => (
                        <li>{inst}</li>
                    ))
                }
            </div>
        </div>
    )
}
      Login or Signup to reply.
    3. 0

      You don’t need useState inside the Patterns component. You need to manage the state in the Parent component that has the Patterns and Output component to forward information to the child components. So create a state in the Parent component to manage the selectedItem and setSelectedItem and pass the setSelectedItem to the Patterns component and the selectedItem to the Output component. I saw your code on github and it should be something like this:

      Parent component:

      import React, { useState } from 'react';
import { Patterns } from './patterns';
import { Output } from './output';
import '../App.css';

export const Parent = () => {
  const [selectedItem, setSelectedItem] = useState({
    id: 0,
    text: '',
    array: [],
  });

  return (
    <main>
      <div className="left">
        <Patterns changeSelectedItem={setSelectedItem} />
      </div>
      <div className="right">
        <Output selectedItem={selectedItem} />
      </div>
    </main>
  );
};

      Patterns component:

      import React from 'react';
import '../App.css';

export const Patterns = (props) => {
  const patterns = [
    { id: 1, text: 'Checker Board', array: ['a', 'R', '..'] },
    { id: 2, text: 'Checkerboard Cube', array: ['b', 'R', 'l', 'r'] },
    { id: 3, text: 'Plus Minus', array: ['c', 'R', 'r'] },
    { id: 4, text: 'Gift Box', array: ['d', 'R', 'd'] },
    { id: 5, text: 'Cross', array: ['e', 'R', '..'] },
    { id: 6, text: '4 Crosses', array: ['f', 'R', '..'] },
    { id: 7, text: 'Cube in Cube', array: ['g', 'R', '..'] },
    { id: 8, text: 'Cube in Cube in Cube', array: ['h', 'R', '..'] },
    { id: 9, text: '4 Spots', array: ['i', 'R', '..'] },
    { id: 10, text: '6 Sopts', array: ['j', 'R', '..'] },
  ];

  return (
    <div>
      <p>Patterns</p>
      <ul>
        {patterns.map((item) => (
          <li key={item.id}>
            <a
              onClick={props.changeSelectedItem({
                id: item.id,
                text: item.text,
                array: item.array,
              })}
              className="patternslist"
            >
              {item.text}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
};

      Output component:

      import React from 'react';
import '../App.css';

export const Output = (props) => {
  return (
    <div className="right-pane">
      <div className="PatternTitle">
        <p>{props.selectedItem.text}</p>
      </div>
      <div className="inst">
        <ul>
          {props.selectedItem.array.map((instruction, index) => (
            <li key={index}>{instruction}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};
      Login or Signup to reply.
    Please signup or login to give your own answer.

    Back To Top
    Search