How to pass value of input to div in useState hook reactJs

JavaScript
1

I create multiple step button with useState hook and it work fine. Now I trying pass value of inputs from step two of button to step three. There is a problem I can’t pass props or state in my function and I have error that state or props is undefined. I try more and more but give nothing.

This is my code :

const ShowOrNot = () => {
    const [showForm, setShowForm] = useState(false);
    const [showPreview, setShowPreview] = useState(false);
    const [formHidden, setFormHidden] = useState(false);
    return (
        <div className="col-12">
            {!showForm ? (
                <ShowFormButton onClick={() => setShowForm(true)}/>
            ) : undefined}

            {showForm ? (
                <div className={''} id="scrollbar-style">
                    <div>
                        <HideFormButton
                            onClick={() => {
                                setShowForm(false);
                            }}
                        />
                    </div>
                    {!formHidden ? <MyForm/> : undefined}

                    {!showPreview ? (
                        <ShowPreviewButton
                            onClick={() => {
                                setShowPreview(true);
                                setFormHidden(true);
                            }}
                        />
                    ) : undefined}
                    {showPreview ? (
                        <div className={"preview-send-wrapper"}>
                            <div className={"preview-send-header"}>
                                <div className={"preview-send-header-icon"}>
                                  
                                </div>
                                <h2>
                                    Preview
                                </h2>
                            </div>
                            <div className={"mt-5 preview-send-cover"}>
                                <img src={value of inputs} alt={"cover"}/>
                            </div>
                            <div className={" preview-send-video-poster"}>
                                <img src={value of inputs} alt={"cover"}/>
                                <h1 className={"mt-4"}>
                                    {this.props.videoTitle} // one value of inputs get here
                                    <span>{two value of inputs get here}</span>
                                </h1>
                                <h4 className={"mt-3"}>
                                   {value of inputs} 
                                </h4>
                            </div>
                            <div className={"preview-send-summary-video"}>
                                <p>
                                    {value of inputs}
                                </p>
                            </div>
                            <Row>
                                <div className={"col-lg-8 col-12"}>
                                    <button className={"send-video-btn-final"}>
                                        Send
                                    </button>
                                </div>
                                <div className={"col-lg-4 col-12"}>
                                    <SendButton
                                        onClick={() => {
                                            setFormHidden(false);
                                            setShowPreview(false);
                                            setShowForm(true);
                                        }}
                                    />
                                </div>
                            </Row>
                        </div>
                    ) : undefined}
                </div>
            ) : undefined}
        </div>
    );
};

function SendButton({onClick}) {
    return (
        <div>
            <button className="edit-send-video-btn w-100" onClick={onClick}>
                Edit
            </button>
        </div>
    );
}

function ShowFormButton({onClick}) {
    return (
        <div>
            <button className="upload-content-btn w-100" onClick={onClick}>
                <span className="ml-2">
                       
                </span>new upload{' '}
            </button>
        </div>
    );
}

function ShowPreviewButton({onClick}) {
    return (
        <div className={"row show-preview-button"}>
            <div className="col-lg-8 col mt-3">
                <button className="preview-send-data-btn" onClick={onClick}>
                    Preview
                </button>
            </div>
            <div className="col-lg-4 col mt-3">
                <button className="draft-send-data-btn">Draft</button>
            </div>
        </div>
    );
}

function HideFormButton({onClick}) {
    return (
        <div className={'content-send-form-close-btn'}>
            <button onClick={onClick} className={'close-modal-btn'}>
                <span>Close</span>
               
            </button>
        </div>
    );
}

class MyForm extends Component {
    constructor(props) {
        super(props);
        this.state = {

                videoTitle: "",
                category: "",
                summary: "",
                videoText: "",

        }
    }

    onChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value,
        });
    };

    render() {
        return (
            <div className={"content-send-form-wrapper"}>
                <div className={'content-send-form-header'}>
                    <div className={'content-send-form-header-title'}>
                        
                    </div>
                  

                </div>
                <form className={'mt-3 content-send-form-data register-teacher-inputs-box '}>
                    <Row>
                        <div className={'col-lg-6 col-12 mt-4'}>
                            <label htmlFor={'name'} className={' text-right'}>
                                <span>*</span>
                            </label>
                            <input
                                type="text"
                                className="form-control"
                                placeholder={'Title'}
                                name={'videoTitle'}
                                required="true"
                                value={this.state.videoTitle}
                                onChange={this.onChange}
                                onBlur={(e) => (e.target.placeholder = 'Title')}
                                onFocus={(e) => (e.target.placeholder = '')}
                            />
                        </div>
                        <div className={'col-lg-6 col-12 mt-4'}>
                            <label htmlFor={'country'} className={' text-right'}>
                                <span>*</span>
                            </label>
                            <input
                                type="text"
                                className="form-control"
                                placeholder={'category'}
                                name={'category'}
                                value={this.state.category}
                                onChange={this.onChange}
                                required="true"
                                onBlur={(e) => (e.target.placeholder = 'category')}
                                onFocus={(e) => (e.target.placeholder = '')}
                            />
                        </div>
                    </Row>
                   
                    <Row>
                        <div className="col-12 mt-3 video-upload-input-btn">
                            <VideoUpload/>
                        </div>
                    </Row>
                    <Row>
                        <div className="col-lg-6 col-12 mt-3">
                            <PosterUpload/>
                        </div>
                        <div className="col-lg-6 col-12 mt-3">
                            <CoverUpload/>
                        </div>
                    </Row>
                </form>
               
            </div>
        );
    }
}
2

You don’t seem to be using the component ShowOrNot? And even if you were, the component doesn’t have any props – you aren’t passing anything to that function, it can’t use values without you actually giving them to it. If you have a function that needs to use some values and you don’t give the function those values, how will it work?

3

I pass the ShowOrNot component here:

class UploadContentButton extends Component {
    render() {
        return (
            <div className="mt-5">
                <div className={"row"} id="show-button">
                    <ShowOrNot/>
                </div>
            </div>
        );
    }

}

export default UploadContentButton

My problem is how to pass value of form to other function by using useState hook.

4

You pass it in as an argument: it’s a function, if you have a function that depends on some values, you need to make values available to the function. You do that in JavaScript by passing them as parameters – React does not work differently. The function calls are written in the code as JSX, but they are still functions:

// in parent
[myValue, setMyValue] = useState


return (
  <Component
    myValue={myValue}
    setMyValue={setMyValue}
  />
)
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.