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

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 (
        <div className='note new'>
            <textarea
                rows='8'
                cols='10'
                placeholder='Type to add a note...'
                value={noteText}
                onChange={handleDescChange}
            ></textarea>
            <input style={{
                paddingTop: "1.5%",
                outline: "none",
                color: "black",
                marginRight: "0px",
                marginLeft: "0px",
                paddingRight: "0px",
                backgroundColor: "white"
            }}
                className="form-control"
                id="link"
                name="link"
                placeholder="Link to Job Posting"
                value={jobLink}
                type="link"
                onChange={handleJobLinkChange}
            />
            <div className='note-footer'>
                <small>
                    {characterLimit - noteText.length} Remaining
                </small>
                <button className='save' onClick={handleSaveClick}>
                    Save
                </button>
            </div>
        </div>
    );
};

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 (
        <div className='note'>
            <span>{text}</span>
            <div className='note-footer'>
                <small>{date}</small>
                <div className='note-btn'>
                <button onClick={go} style={{ backgroundColor: "#001E49", borderRadius: "10px"
                , borderColor: "none", margin: "auto", padding: "8px", marginLeft: "0px"
                , marginRight: "0px", width: "fit-content"
                , borderColor: "none"}}>Apply Here</button>
                </div>
            </div>
        </div>
    );
};

export default Note;

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

const NotesList = ({
    notes,
    handleAddNote,
    handleDeleteNote,
}) => {
    return (
        <div className='notes-list'>
            {notes.map((note) => (
                <Note
                    id={note.id}
                    text={note.text}
                    date={note.date}
                    handleDeleteNote={handleDeleteNote}
                />
            ))}
            <AddNote handleAddNote={handleAddNote} />
        </div>
        
    );
};

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 (
        <div className={`${darkMode && 'dark-mode'}`}>
            <div className='container'>
                <Header />
                <Search handleSearchNote={setSearchText} />
                <NotesList
                    notes={notes.filter((note) =>
                        note.text.toLowerCase().includes(searchText)
                    )}
                    handleAddNote={addNote}
                    handleDeleteNote={deleteNote}
                />
            </div>
        </div>
    );
};

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.

CodePudding user response：

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");
<input style={{
        paddingTop: "1.5%",
        outline: "none",
        color: "black",
        marginRight: "0px",
        marginLeft: "0px",
        paddingRight: "0px",
        backgroundColor: "white"
    }}
        className="form-control"
        id="link"
        name="link"
        placeholder="Link to Job Posting"
        value={jobLink}
        type="link"
        onChange={() => 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.

CodePudding user response：

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 => (<Note noteText={elem.noteText} jobLink={elem.jobLink} />))}

(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!