CODEWITHSUNDEEP
reactjs
CatDev0098
CatDev0098

Reputation: 11

Failed to Export Multiple components in React

My goal is to render list in index.js, where the todo list items appear. I tried to export from CreateArea.jsx both the CreateArea and todoItems (an array). Here's what I've done:

function listItems(value) {
    var todoItems = [defaultItem];
    const defaultItem = "Welcome to the Todo-List App!"
    todoItems.push(value);
}

function CreateArea() {
    const inputRef = useRef();

    function onClick() {
        listItems(inputRef.current.value);
        console.log("Pushed item in the array!");
    }

    return (
        <div className="mainbox">
            <div className="inputdiv">
                <input
                  type="text"
                  ref={inputRef} // tell the input element to use this ref.
                  placeholder="Enter Task..."
                  className="textbox"
                  id="taskName"
                />
                <button className="button" onClick={onClick}>+</button>
            </div>
        </div>
    );
}

export {CreateArea, todoItems};

Thanks!

EDIT:

Error - Failed to compile.

./src/components/CreateArea.jsx
SyntaxError: C:\Users\huang\Desktop\WebApps\React-Todo-List\my-app\src\components\CreateArea.jsx: Export 'todoItems' is not defined. (35:20)

  33 | }
  34 |
  35 | export {CreateArea, todoItems};
     |                     ^
  36 |
    at parser.next (<anonymous>)

Upvotes: 1

Views: 39

Answers (1)

Aditya Sharma
Aditya Sharma

Reputation: 26

There's no todoItems defined inside index.js. The todoItems variable is defined under listItem, so its value is not available during export.

Also, you're adding defaultItem to todoItem array before even declaring it. This will also throw error.

Upvotes: 1

Related Questions