How can I get input(they will input a link) from user and store it inside of a button and have it redirect?

Question

import { useState } from 'react';

const AddNote = ({ handleAddNote }) => {
    const [noteText, setNoteText] = useState('');

    const [jobLink, setJobLink] = useState('');

    const characterLimit = 200;

    const handleDescChange = (event) => {
        if (characterLimit - event.target.value.length >= 0) {
            setNoteText(event.target.value);
        }
    };

    const handleJobLinkChange = (event) => {
        if (event.target.value.length >= 0) {
            setJobLink(event.target.value);
            console.log(event.target.value);
        }
    };

    const handleSaveClick = () => {
        if (noteText.trim().length > 0) {
            handleAddNote(noteText);
            setNoteText('');
            setJobLink('');
        }
    };

    return (
        
            
            
            
                
                    {characterLimit - noteText.length} Remaining
                
                
            
        
    );
};

export default AddNote;

import { MdDeleteForever } from 'react-icons/md';
import AddNote from './AddNote';

const Note = ({ id, link, text, date, handleDeleteNote,}) => {

    
    const go = e => {
        link = "https://www.google.com";
        e.preventDefault();
        window.location.href = link;
    }
    
    return (
        
            {text}
            
                {date}
                
                
                
            
        
    );
};

export default Note;

import Note from './Note';
import AddNote from './AddNote';

const NotesList = ({
    notes,
    handleAddNote,
    handleDeleteNote,
}) => {
    return (
        
            {notes.map((note) => (
                
            ))}
            
        
        
    );
};

export default NotesList;

import React from 'react'
import './Internships.css'
import { useState, useEffect } from 'react';
import { nanoid } from 'nanoid';
import NotesList from  '../components/NotesList';
import Search from '../components/Search';
import Header from '../components/Header';

const Internships = () => {

  const [notes, setNotes] = useState([
    ]);

    const [searchText, setSearchText] = useState('');

    const [darkMode, setDarkMode] = useState(false);

    useEffect(() => {
        const savedNotes = JSON.parse(
            localStorage.getItem('react-notes-app-data')
        );

        if (savedNotes) {
            setNotes(savedNotes);
        }
    }, []);

    useEffect(() => {
        localStorage.setItem(
            'react-notes-app-data',
            JSON.stringify(notes)
        );
    }, [notes]);

    const addNote = (text, link) => {
        const date = new Date();
        const newNote = {
            id: nanoid(),
            text: text,
            date: date.toLocaleDateString(),
            link: link,
        };
        const newNotes = [...notes, newNote];
        setNotes(newNotes);
    };


    const deleteNote = (id) => {
        const newNotes = notes.filter((note) => note.id !== id);
        setNotes(newNotes);
    };

    return (
        
            
                
                
                
                        note.text.toLowerCase().includes(searchText)
                    )}
                    handleAddNote={addNote}
                    handleDeleteNote={deleteNote}
                />
            
        
    );
};

export default Internships

for the 'link= "www.google.com"'(it is a placeholder) the button redirects me to google.com but I want there to be a user inputted website and it redirects me there. I am not able to pass joblink into note.js and it is not reading it when I did inspect element on the button that was created. I don't know how to fix trying to get an input from the user and passing it into note.js.

Andrew Damavoletes · Answer

I am a little bit confused by how the code was written out on the forum, but it seems like you could set a state for the target value in your input. So do something like

const[site, setSite] = useState("https://www.google.com");
 setSite(e.target.value)}
    />

And then use callback props and send it to your Note component, then replace your 'go' link to

link = site

I apologize if that made no sense lol.

Axel Bozzola · Answer

From my understanding, you have the component AddNote where the user is able to generate a new job post, and these values saved here are needed in the Note component

Here not only the states are saved in the incorrect component, but when they hit save (handleSaveClick) this happens:

setNoteText('');
setJobLink('');

What I recommend is to have a Notes component, including a notes state array where you'll save a json with noteText and jobLink, and then map those to Note components, passing them as props. And this Notes component can also contain the AddNote Component so this way you can pass the setNotes hook and efficiently work with dynamic job posts:

const [notes, setNotes] = useState([])

{notes?.length > 0 && notes.map(elem => ())}

(preferably pass the 'elem' as a whole, maybe you'll add new properties to it and the props quantity will grow) and with the use of useRef hook:

const handleSaveClick = () => {
    handleAddNote(prev => [...prev, {noteLink: noteLinkRef.current.value, jobLink: jobLinkRef.current.value}])
}

Hope this helps to understand, if you feel that I need to expand a little bit more, let me know!

How can I get input(they will input a link) from user and store it inside of a button and have it redirect?

2 Answers