A bread didn't show

[devinyan]

Hi @icd2k3 ，I followed the guide and realize breadcrumbs as below.
I met the problem the fourth bread didn't show.
Any where has problem?

Thanks.

const UserBreadcrumb = ({ match }) => ( <span>{getProductName(match.params.pid)}</span> )
const routes = [
{ path: '/product/detail/:pid', breadcrumb: UserBreadcrumb },
{ path: '/', breadcrumb: 'HomePage' },
{ path: '/carts', breadcrumb: 'Cart' },
{ path: '/login', breadcrumb: 'Login' },
{ path: '/product/detail', breadcrumb: 'Detail Info'},
{ path: '/product', breadcrumb: 'Product' }
];

function getProductName(id) {
let callURL = 'https://easy-mock.com/mock/5b14997f27efb177b0e1052f/products/detail/' + id;
axios.get(callURL)
.then(function(response){
console.log(response);
return response.data.product.title;
});
}

const Breadcrumbs = ({ breadcrumbs }) => (

<div id="breadcrumb" className="breadcrumb">
	<ul className="clearfix">
			{breadcrumbs.map((breadcrumb, index) => (				
				<li key={breadcrumb.key}>
						<NavLink to={breadcrumb.props.match.url}>
							{breadcrumb}
						</NavLink>
						{(index < breadcrumbs.length - 1) ?  ">" : ""}
				</li>

			))}
	</ul>
</div>

);

export default withBreadcrumbs(routes)(Breadcrumbs);

[icd2k3]

👋 hey @devinyan,

For testing purposes, if you change your UserBreadcrumb to:
const UserBreadcrumb = () => ( <span>Testing</span> )

Does "Testing" now show up?

[devinyan]

Hi @icd2k3,
Thanks for your response.
Yes as you said, "Testing" was showed up,
but as my code, if the "Testing" was replaced by some function so as to dynamically show value,it didn't work.I don't know why.

[icd2k3]

Hey @devinyan,

So in this case it looks like not a problem with this package, but rather mapping a prop to a function which returns a promise.

Using this example I recommend setting up this breadcrumb component like:

(es6)

// ProductTitleBreadcrumb.jsx

export default class ProductTitleBreadcrumb extends React.PureComponent {
  state = {
    productTitle: 'Loading...',
  };

  componentDidMount() {
    const { pid } = this.props.match.params;
    const callURL = `https://easy-mock.com/mock/5b14997f27efb177b0e1052f/products/detail/${pid}`;
    axios.get(callURL).then(({ data }) => {
      this.setState({ productTitle: data.product.title });
    });
  }

  render() {
    const { productTitle } = this.state;
    return (
      <span>{productTitle}</span>
    );
  }
}

[devinyan]

Hi @icd2k3 ,
Wow, thank you very much. it works.