Build a Fruit Search App - Step 12

JavaScript
1

Tell us what’s happening:

i have created a ternary operator as the test asks and the console seems to throw a warning that says" Warning: value prop on %s should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.%s input
at input
at form
at div
at FruitsSearch"
i dont know which value it means ,is it in the upper part of the form , in the input or in the current div itself

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Fruits Search</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
  <script 
    data-plugins="transform-modules-umd"
    type="text/babel"
    src="index.jsx"
  ></script>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div id="root"></div>
  <script
    data-plugins="transform-modules-umd"
    type="text/babel"
    data-presets="react"
    data-type="module"
  >
    import { FruitsSearch } from './index.jsx';
    ReactDOM.createRoot(document.getElementById('root')).render(<FruitsSearch />);
  </script>
</body>
</html>

/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}

#search-container {
  text-align: center;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#search-input {
  padding: 10px;
  width: 80%;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

#results {
  text-align: left;
  max-height: 150px;
  overflow-y: auto;
}
.result-item {
  padding: 5px;
  border-bottom: 1px solid #ddd;
}

/* file: index.jsx */
const { useState, useEffect } = React;

export function FruitsSearch() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  function handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <div id="search-container">
      <form onSubmit={handleSubmit}>
        <label htmlFor="search-input">Search for fruits:</label>
        <input
          id="search-input"
          type="search"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
      </form>

{/* User Editable Region */}

      <div id="results">
      {results.length > 0 ? results.map((result,index)=>{<p class="result-item" key={index}>{result}</p>}):<p> No results found </p>}
      </div>

{/* User Editable Region */}

    </div>
  );
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Challenge Information:

Build a Fruit Search App - Step 12

2

Very close, there are a few small details:

  1. Try formatting your code in a way that’s easier to read. It’s all on one line with no spaces. That’s difficult to read and might not work with the compiler.
  2. Your map function is one line so it doesn’t need curly braces, you can remove those
  3. “No results found” has extra spaces around it

I recommend formatting your ternary something like this:

isThis ?
    then do this :
    or this

to break it up and make it easier to read. I think the : needs to have spaces around it. I’m not sure if that’s strict syntax or just style but… you should do it.

3

thanks i passed after adding the space and removing the braces

1 Like