Passing variable to react component

Question

I have:

        function Button(){
        /*.. useQuery ...*/
         const onClick = props => (
         console.log(props.target.value)
           )
        return(
          /*  ... */
            <button value={id} onClick={onClick} >details</button>
        )
        }

I want to pass props.target.value to class react.component. where it will be used to display popup. I want something like:

class Details extends React.Component{
/* if thereIsID == 0 then "" or if thereIsID == not 0 then show popup with data according to props.target.value */
}

I used many different variants.. Maybe I am trying not right approach? Can you recommend something?

Hafid Denguir · Accepted Answer · 2022-01-31 15:44:03Z

import React, { useState } from 'react';
import './style.css';

function Button({ onClickHandler }) {
  /*.. useQuery ...*/
  const onClick = (props) => {
    onClickHandler(props.target.value);
  };
  return (
    /*  ... */
    <button value={1} onClick={onClick}>
      details
    </button>
  );
}

class Details extends React.Component {
  /* if thereIsID == 0 then "" or if thereIsID == not 0 then show popup with data according to props.target.value */

  render() {
    return (
      <div>
        Details of Details : {this.props.detail === 0 ? '00000' : 'not 0000000'}
      </div>
    );
  }
}

export default function App() {
  const [show, setShow] = useState(false);
  const [detail, setDetail] = useState('');

  const onClickHandler = (val) => {
    setDetail(val);
    setShow((prev) => !prev);
  };

  return (
    <div>
      <Button onClickHandler={onClickHandler} />
      {show && <Details detail={detail} />}
    </div>
  );
}

Link to test : https://react-sjsxn2.stackblitz.io

Collectives™ on Stack Overflow

Passing variable to react component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related