reactjs - How to pass button text content to another page in React? - TagMerge
4How to pass button text content to another page in React?How to pass button text content to another page in React?

How to pass button text content to another page in React?

Asked 1 years ago
1
4 answers

The Link component attribute to can also be an object with additional parameters. See the full documentation here: https://v5.reactrouter.com/web/api/Link
This allows you to do the following:

<Link to={{ pathname: "/page3", state: { time: "15:00" } }} >{ /** ... */ }</Link>

On the target component, you can access the state via props.location.state as follows:

const Page3 = (props) => {
  const { time } = props.location.state;
  return (
    <div id="page3">
      <Header/>
      <div id="test">
        <p>{ time }</p>
      </div>
    </div>  
  )
}

Source: link

0

Here You can use a link styled as a button.
<Link to="/signup" className="btn btn-primary">Sign up</Link>
React button onClick redirect page July 27, 2021 by admin
import { useHistory } from 'react-router-dom';
const App = () => {
   const history = useHistory()
   <i className="icon list arrow left"
      onClick={() => {
        history.goBack()
   }}>
}
If you are using React Router v5 with hooks.
import React from 'react';
import { useHistory } from "react-router-dom";
function LoginLayout() {

  const history = useHistory();

  const routeChange = () =>{ 
    let path = `newPath`; 
    history.push(path);
  }

  return (
      <div className="app flex-row align-items-center">
        <Container>
          ...
          <Row>
            <Col xs="6">                      
              <Button color="primary" className="px-4"
                onClick={routeChange}
                  >
                  Login
                </Button>
            </Col>
            <Col xs="6" className="text-right">
              <Button color="link" className="px-0">Forgot password?</Button>
            </Col>
          </Row>
          ...
        </Container>
      </div>
  );
}
export default LoginLayout;
If you are using React Router v5
import { useHistory } from 'react-router-dom';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink  } from 'reactstrap';

class LoginLayout extends Component {

  routeChange=()=> {
    let path = `newPath`;
    let history = useHistory();
    history.push(path);
  }

  render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          ...
          <Row>
            <Col xs="6">                      
              <Button color="primary" className="px-4"
                onClick={this.routeChange}
                  >
                  Login
                </Button>
            </Col>
            <Col xs="6" className="text-right">
              <Button color="link" className="px-0">Forgot password?</Button>
            </Col>
          </Row>
          ...
        </Container>
      </div>
    );
  }
}
If you are using React Router v4
import { withRouter } from 'react-router-dom';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink  } from 'reactstrap';

class LoginLayout extends Component {
  constuctor() {
    this.routeChange = this.routeChange.bind(this);
  }

  routeChange() {
    let path = `newPath`;
    this.props.history.push(path);
  }

  render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          ...
          <Row>
            <Col xs="6">                      
              <Button color="primary" className="px-4"
                onClick={this.routeChange}
                  >
                  Login
                </Button>
            </Col>
            <Col xs="6" className="text-right">
              <Button color="link" className="px-0">Forgot password?</Button>
            </Col>
          </Row>
          ...
        </Container>
      </div>
    );
  }
}

export default withRouter(LoginLayout);

Source: link

0

First, you'll need to create two components, one parent and one child.
import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}
import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js
import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}
Next, you'll import the child component in the parent component and return it.
import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}
Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.
import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}
Pass the data as props when you are calling the child component like this:
<Child parentToChild={data}/>

Source: link

0

navigation.navigate
navigation.navigate('SecondPage', {
  paramKey: 'Some Param from previous Screen',
})
Pass params to a route by putting them in an object as a second parameter to the navigation.navigate function from First Screennavigation.navigate('SecondPage', { paramKey: 'Some Param from previous Screen', })
route.params.paramKey
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
If you want to start a new project with a specific React Native version, you can use the --version argument:
react-native init ProjectName --version X.XX.X

Source: link

Recent Questions on reactjs

    Programming Languages