How can I pass component data to breadcrumb?

[ni3galave]

Here is the use case:
Let's consider person module i.e person = { id : 0, name : 'John Snow' }
I want person name on the breadcrumb link instead of id text.
This can be achieved if I pass directly person name as part of URL but I do not want to do that. (Due to some real-life scenario;s )
For more understanding see the below code :

const Breadcrumbs = BreadcrumbConfig({
  //How can I get name over here i.e John Snow instead of id
  dynamicRoutesMap: {
    '/:id': ({ id, name }) => ` ${name} `
  },
  
});
export default class App extends Component {
    render() {
        return (
            <Router>
              <div>
              <Route
                render={({ location }) => { 
                    return <Breadcrumbs pathname={location.pathname} />; 
                }}
              />
            <Person match={{ params: { id: 0 }, url: '' }} />
            </div>
            </Router>
        );
    }
}

class Person extends Component {
  constructor(props){
    super(props);
     this.state = { person : this.getPersonInfo(props.match.params.id) }

  }
  getPersonInfo(){
    // asnyc call that fetches data from server end;
    //return  {'id':0, name:'John Snow'}
    return person;
  }
  render(){
    return (
      <div>
        <h3>{this.state.person.name}’s Friends</h3>
        <ul>
          <li>
              <Link to={`${this.props.match.url}/${this.props.match.params.id}`}>
                  {this.state.person.name}
              </Link>
          </li>
        </ul>
      </div>
    );
  }

};

Real life scenario: I have one module that is X-Ray Device which has attributes: device_id and IP address.
So over here I want to show IP address on the breadcrumbs link but I do not want to pass IP address as part of URL which kind of weird if pass.

Thanks!

[likun7981]

I am sorry to tell you, the auto-breadcrumb is not yet available for this scenarios, but I think I have thought of a solution, we can return a Promise. We can in the dynamicRoutesMap function corresponding to the request, and then return to a promise object, to deal with this asynchronous scene, like this:

const Breadcrumbs = BreadcrumbConfig({
  dynamicRoutesMap: {
    '/:id': ({ id }) => {
         return new Promise((resolve, reject)=>{
             fetch(`http://url.get.name.by/${id}`).then((response)=>{
                 resolve(response.json().name)
             }, ()=>{
                // catch some error 
            })
        })
    }
  },
});

What do you think？

[ni3galave]

Thanks for the quick response.

I also thought about the same solution but in that case, I need to make two different calls to fetch same information in the dynamicRoutingMap and in my component as well. Which makes me seek :(

[likun7981]

This is a problem, I have not thought of any good solution for data interaction between the component and Breadcrumb. Maybe can use redux state.

[ni3galave]

I am not using any state management tool for my react application like redux/Mobx. Just controlling react component state using the plain setState method.