Mui input field resets while setting state

I’ve recently been interested in material design and found a library called mui which is I guess basically a port of material ui to react. Everything is okay exept when I’m setting any state the fields resets.

import { FilledInput, Input, OutlinedInput, TextField } from "@mui/material";
import { useState } from "react";
import { useDropzone } from "react-dropzone";
import { alpha, createTheme, styled } from '@mui/material/styles';
import MdEditor from 'react-markdown-editor-lite';
import Blog from "../components/Blogs/Blog/Blog";
import MarkdownIt from "markdown-it";
import 'react-markdown-editor-lite/lib/index.css';

export const AddBlog = () => {


    const [title, setTitle] = useState(""); //Setting this resets the text field


    const CssTextField = styled(TextField)({

        '& label': {
            color: 'white !important',
        },

        '& input': {
            color: 'white !important',
        },


        '& .MuiOutlinedInput-root': {
            '& fieldset': {
                borderColor: 'white',
            },
            '&:hover fieldset': {
                borderColor: 'white',
            },
            '&.Mui-focused fieldset': {
                borderColor: '#0582CA',
            },
        }
    });

    const handleInput = (e : React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
        setTitle(e.target.value);
    }


    return (
        
            <div className="flex flex-col items-center gap-5 my-4">
                <CssTextField label="Tytuł" color="primary" className="md:w-1/3 w-full" onChange={(e) => handleInput(e)} />
               
            </div>

        


    )

}

Everytime stateful data changes the text input gets reset and the value also gets reset so you can’t type in anything

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

So, yeah I found a solution to this. The reason was that whenever I set the state the component rerenders and so does the CssTextField variable. I moved the CssTextField out of the component and now it works. Here’s the correct code.

const CssTextField = styled(TextField)({

        '& label': {
            color: 'white !important',
        },

        '& input': {
            color: 'white !important',
        },


        '& .MuiOutlinedInput-root': {
            '& fieldset': {
                borderColor: 'white',
            },
            '&:hover fieldset': {
                borderColor: 'white',
            },
            '&.Mui-focused fieldset': {
                borderColor: '#0582CA',
            },
        }
    });

export const AddBlog = () => {


    const [title, setTitle] = useState(""); 

    const handleInput = (e : React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
        setTitle(e.target.value);
    }


    return (
        
            <div className="flex flex-col items-center gap-5 my-4">
                <CssTextField label="Tytuł" color="primary" className="md:w-1/3 w-full" onChange={(e) => handleInput(e)} />
               
            </div>

        


    )

}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0