javascript pass de props par navlink

Posted 2021-05-03

import React, {Component} from 'react';
import NavLink from "react-router-dom/es/NavLink";
import Info from "./Info";

class Display2 extends Component {
    state = {
        personne:[],
    };

object = (people) => {
    this.setState({personne:people});
    console.log(people);
};

    render() {
        return (
            <div>
                <div className="row">
                    {this.props.peoples
                        .filter(people =>  people.name.includes(this.props.valeur))
                        .map((people, index) => (
                            <div className="card col-sm-3 d-flex justify-content-around" key={index}>
                                <img className="card-img-top shadow-lg p-3 mb-5 bg-white rounded "
                                     width={250}
                                     height={400}
                                     src={people.image}
                                     alt="#"
                                />
                                    <div className="card-body">
                                        <h5 className="card-title">{people.name}</h5>
                                        <NavLink
                                            exact to={{pathname:"/Info",state:{personne:people}}}>
                                            <a href="#" className="btn btn-dark" onClick={()=>this.object(people)}>Plus info</a>
                                        </NavLink>

                                    </div>
                            </div>
                        ))}
            </div>
            </div>
        );
    }
}

export default Display2;

import React, {Component} from 'react';
import {NavLink, Link} from "react-router-dom";
import {InputGroup, InputGroupAddon, Input} from 'reactstrap';
import {ListGroup, ListGroupItem} from 'reactstrap';
import "./NavigationAll.css"
import axios from "axios"

class NavigationAll extends Component {
    state = {
        filter: "",
        allContact: [],
        contact: []
    };
    retrieveData = async () => {
        const url = "/contacts";
        const data = await axios.get(`${url}`);
        this.setState({allContact: data.data.contact})

    };

    componentDidMount() {
        this.retrieveData();
    }

    handleChange = (e) => {
        this.setState({[e.target.name]: e.target.value})
    };

    contact = (contact) => {
        this.setState({contact : contact})
    }

    render() {
        return (
            <div>
                <div className="nav">
                    <div>
                        <InputGroup>
                            <InputGroupAddon addonType="prepend">Search</InputGroupAddon>
                            <Input placeholder="username" onChange={this.handleChange} name="filter"
                                   value={this.state.filter}/>
                        </InputGroup>
                    </div>
                    <div className="icone">
                        <NavLink to="/contact">
                            <i className="fas fa-plus"></i>
                        </NavLink>
                    </div>
                </div>

                <div>
                    {
                        this.state.allContact.filter(contact => contact.firstname.includes(this.state.filter))
                            .map(contact => {
                                return (
                                    <ListGroup>
                                        <ListGroupItem className="box">

                                            <div className="imgContact">
                                                <img src="https://via.placeholder.com/100" alt=""/>
                                            </div>

                                            <div className="boxContent">

                                                <div className="contentContact">
                                                    {contact.firstname}
                                                    {contact.lastname}
                                                </div>

                                            </div>
                                            <div className="iconeArrow" onClick={() => this.contact(contact)}>
                                                <NavLink to={{pathname:"/details",state:{contact:contact}}}>
                                                    <i className="fas fa-arrow-circle-right"></i>
                                                </NavLink>
                                            </div>
                                        </ListGroupItem>
                                    </ListGroup>
                                )
                            })
                    }
                </div>

            </div>
        );
    }
}


export default NavigationAll;