How to Render a Link Component

26
September 21, 2021, at 12:20 PM

I have this APP component. At the bottom of the code, have a Link to a CountryDetail component. The problem is that I get error when I click on the link.

function App() {
  const [input, setInput] = useState("");
  const [countries, setCountries] = useState([]);
  const [search, setSearch] = useState([]);
  const [status, setStatus] = useState("All");
  const [filteredCountries, setFilteredCountries] = useState([]);

   function onFilter(name) {
    let country = countries.filter((c) => c.name);
    if (countries.length > 0) {
      return country[0];
    } else {
      return null;
    }
  }  
  return (
    <div className="App">
      <header className="App-header"></header>
      <Router>
        <Route path="/" component={Navbar} />
        <Form
          onSearch={onSearch}
          setInput={setInput}
          setSearch={setSearch}
          input={input}
          setStatus={setStatus}
        />
        <AllCountries
          countries={countries}
          search={search}
          filteredCountries={filteredCountries}
        />
        <Route
          exact
          path="/country/:name"
          render={({ match }) => (
            <CountryDetail props={onFilter(match.params.name)} />
          )}
        />
      </Router>
    </div>
  );
}
export default App;

Here is the CountryDetail component:
function CountryDetail({ props }) {
  console.log(props);
  return (
    <div className="details">
      <div className="info">
        <img src={props.flag} className="flags"></img>
        <ul>Name:{props.name}</ul>
        <ul>Native Name: {props.nativeName}</ul>
        <ul>Population:{props.population}</ul>
        <ul>Region:{props.region}</ul>
        <ul>Sub-Region:{props.subregion}</ul>
        <ul>Capital:{props.capital}</ul>
        <ul>Top Level Domain:{props.topLevelDomain}</ul>
        <ul>Currencies:{props.currencies}</ul>
        <ul>Language:{props.language}</ul>
      </div>
    </div>
  );
}
export default CountryDetail;

What Im doing wrong? The CountryDetailed component seems OK for me. On the other hand, here is the console error:

If I consolo log the props, it returns the object, but when I want to render some of the props of that object, it fails...

Any advise for this topic?

READ ALSO
How to fix Attribute Error &#39;NoneType&#39; object has no attribute &#39;strip&#39;

How to fix Attribute Error 'NoneType' object has no attribute 'strip'

I am currently making a discord bot in pythonI am relatively new and have no idea how to fix this error

44
Android - How to share dependencies between testImplementation and androidTestImplementation

Android - How to share dependencies between testImplementation and androidTestImplementation

I'm still fairly new to Android and Gradle, coming from a webdev/maven backgroundI have the MockK library which I want to use in both "normal" unit tests as well as instrumented androidTest tests

39
Rinvex laravel-addresses

Rinvex laravel-addresses

As a beginner Laravel, as using it for few weeks, I find it very frustrating and lost with Rinvex Laravel address and their instruction is a bit lost for beginner people like me, I have lookup google and seems not many details or induction on Rinvex...

54
Can&#39;t import from absolute paths using Typescript and NodeJS

Can't import from absolute paths using Typescript and NodeJS

I've tried many things to solve this issueI'm trying to import from absolute paths defined on my tsconfig

61