A simple Map and select React-CodePudding

I try to fetch 4 categories from my DB.

I get the category, everything is ok but when I submit my form, I get this data :

[object Object],[object Object],[object Object],[object Object]

Here the code :

//State
const [cates, setCates] = useState([]);

// Fetch 4 categories
useEffect(() => {
        const getCates = async () => {
          const res = await axios.get("http://localhost:8080/api/categories");
          setCates(res.data);
        };
        getCates();
      }, [])

      //Map the categories from the State : cates
      const Categorie = cates.map((c) => (
            <option value={c.name}>{c.name}</option>

      ))

My component :

<Select>
    <option value="" hidden>Choisissez une catégorie</option>
    {Categorie}
</Select>

The console.log(Categorie) return an Array of object :

(4) [{…}, {…}, {…}, {…}]
0
: 
{$$typeof: Symbol(react.element), type: 'option', key: null, ref: null, props: {…}, …}
1
: 
{$$typeof: Symbol(react.element), type: 'option', key: null, ref: null, props: {…}, …}
2
: 
{$$typeof: Symbol(react.element), type: 'option', key: null, ref: null, props: {…}, …}
3
: 
{$$typeof: Symbol(react.element), type: 'option', key: null, ref: null, props: {…}, …}
length
: 
4
[[Prototype]]
: 
Array(0)

And the console.log(cates[0].name) give me the result I'm looking for.

But even when I try to put manually the categories like that : cates[0].name, cates[1].names etc... I get a blank page when I save my code and reload the page.

I just want to get my the categorie selected.

CodePudding user response：

It looks like the issue you're encountering is with the way you're trying to access the category names in the value attribute of the <option> elements. The value of the value attribute should be the actual name of the category, rather than cates[0].name, cates[1].name, etc.

Here's an example of how you can fix this issue:

const Categorie = cates.map((c) => (
  <option value={c.name}>{c.name}</option>
))

This code uses the map() method to iterate over the cates array and create an <option> element for each category in the array. The value attribute for each <option> element is set to the actual name of the category, which you can access using c.name.

Hope this helps! Let me know if you have any other questions.

CodePudding user response：

I can see the Categorie return an array of react components, not the data you fetch from the API So you can write like this

const Component = () => {
  const [categories, setCategories] = useState([])

  useEffect(() => {
    const getCates = async () => {
      const res = await axios.get("http://localhost:8080/api/categories");
      setCategories(res.data);
    };
    getCates();
  }, [])

  const List = () => {
    return categories.map(c => (
      <option value={c.name}>{c.name}</option>
    ))
  }

  return (
    <select>
      <option value="" hidden>Choisissez une catégorie</option>
      <List />
    </select>
  )
}

the List will be an array of react components, to use it just simply add <List />

CodePudding user response：

Hi @Romain Plantureux

You could try this as you disrobe in above.

And I notice that <Select> is not should be capital. It's must like that <select>. Maybe that why your page showing blank.

Code Sandbox