Breaking News: Grepper is joining You.com. Read the official announcement!

Passing data through props & making interactive Component

Add Answer

dipu sultan answered on September 6, 2021 Popularity 5/10 Helpfulness 1/10

answer Passing data through props & making interactive Component

related pass props in compound component

related how to pass props in react

related how do you pass props between components

Passing data through props & making interactive Component

Comment

function Parent() {
  const [name, setName] = useState('John');

  function handleChange(event) {
    setName(event.target.value);
  }

  return (
    <div>
      <h1>Parent Component</h1>
      <Child name={name} onChange={handleChange} />
    </div>
  );
}

function Child(props) {
  return (
    <div>
      <h2>Child Component</h2>
      <input type="text" value={props.name} onChange={props.onChange} />
    </div>
  );
}

Popularity 5/10 Helpfulness 1/10 Language javascript

Source: www.almabetter.com

Tags: interactive javascript

Link to this answer
Share Copy Link

Contributed on Dec 17 2023

dipu sultan

0 Answers Avg Quality 2/10

Closely Related Answers

pass props in compound component

Comment

//parent

const Parent = ({ children }) => {
  const [checked, setChecked] = useState(false);

  const allChildren = React.Children.map(children, (child) => {
    const clone = React.cloneElement(child, {
      checked,
      setChecked,
    });
    return clone;
  });
  return allChildren;
};

//child
const Child = ({  checked, setChecked }) => {
  return (
    <div onClick={() => setChecked(!checked)} style={{ color: "red" }}>
      child content
    </div>
  );
};

//app
<Parent>
    <Child /> 
</Parent>

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 09 2022

Mushy Magpie

0 Answers Avg Quality 2/10

how to pass props in react

Comment

const Header = (props) => {
    return (
        <header>
            <h1>{props.title}</h1>
        </header>
    )
}

export default Header

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 06 2021

0xTony143

0 Answers Avg Quality 2/10

how do you pass props between components

Comment

function Greeting(props){
   return(<div>
    //using p

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: dev.to

Tags: between

Link to this answer
Share Copy Link

Contributed on Oct 04 2021

Funny Flamingo

0 Answers Avg Quality 2/10

Passing data through props & making interactive Component

Contents

More Related Answers

Passing data through props & making interactive Component

Closely Related Answers

pass props in compound component

how to pass props in react

how do you pass props between components

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.