Question 74474 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to create an object with useState in React.js – Reactjs

in the code below
I want to make the tags variable as Object instead of a list

Like

[
  {key1: input tag, key2: input tag2, key3: input tag3},
]

"input tag" has the text which user inputs.

But is such a thing possible?

My current code is below

import React from "react";

const TagsInput = (props) => {
    const [tags, setTags] = React.useState([]);

    const addTags = event => {
          setTags([...tags, event.target.value]);
          event.target.value = "";
    };


    return (
        <div className="tags-input">
            <input
                type="text"
                onKeyUp={event => addTags(event)} 
                placeholder="Press enter to add tags"
            />

        </div>
    );
};
export default TagsInput;
Tags:

3

Answers


  1. 0 
     setItems([...tags, { key: e.target.value }]);

    You can push obj to array like this

    Login or Signup to reply.
  2. 0

    this work for me :

    import React, { useEffect } from "react";

const TagsInput = (props) => {
    const [tags, setTags] = React.useState([{}]);

    const addTags = event => {
      if(event.keyCode===13){ // ENTER key code
        const oldObject = tags[0];
        const length =  Object.keys(oldObject).length+1; // get length of object
        const key = "key"+length; // generate new key
        console.log(length)
        oldObject[key] = event.target.value; // add new key and value to object
        setTags([oldObject]); // set new Object to state
        event.target.value = "";
      }
    };

    useEffect(()=>{
      console.log(tags)
    },[tags])

    return (
        <div className="tags-input">
            <input
                type="text"
                onKeyUp={event => addTags(event)} 
                placeholder="Press enter to add tags"
            />

        </div>
    );
};
export default TagsInput;
    Login or Signup to reply.
  3. 0

    If I understood you correctly, you want to store your state data as an object instead of an array.
    If that’s the case you can do the following:

    import React from "react";

const TagsInput = (props) => {
    // No need to initialize as array if we intend to work with objects.
    // Can just start out as an object instead.
    const [tags, setTags] = React.useState({});

    const addTags = event => {
        // Combine "key" with the desired number based on the length of the object keys.
        const newKey = "key" + Object.keys(tags).length + 1
        setTags({...tags, newKey: event.target.value});
    };


    return (
        <div className="tags-input">
            <input
                type="text"
                onKeyUp={event => addTags(event)} 
                placeholder="Press enter to add tags"
            />

        </div>
    );
};
export default TagsInput;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search