(Sitecore) - Component Helper C# , React JS

In order to obtain data from fields, developer needs creates some backend function to reach the goal, this article record the components I create.

To get image url by item id and field name

        public static string getUrl(string itemID, string fieldsName)
        {
            if (fieldsName != "")
            {
                var newsContentSource = Sitecore.Context.Database.GetItem(itemID.Trim(' '));
                Sitecore.Data.Fields.ImageField imgField = newsContentSource.Fields["AktuellImage"];
                string url = Sitecore.Resources.Media.MediaManager.GetMediaUrl(imgField.MediaItem);
                if (url == null)
                {
                    return "";
                }
                else
                {
                    string altText = imgField.Alt;
                    return url;
                }
            }
            else
            {
                return "";
            }
        }


To get Content by item ID

        public static AktuellModel getNewsContent(string itemID)
        {
            AktuellModel am = new AktuellModel();
            string newID = itemID.Trim();
            var newsContentSource = Sitecore.Context.Database.GetItem(newID);
            am.Topic = newsContentSource.Fields["AktuellTopic"].ToString();
            am.Content = newsContentSource.Fields["AktuellContent"].ToString();


            string imageItemID = newsContentSource.Fields["AktuellImage"].ID.ToString().Replace('{', ' ').Replace('}', ' ');
            string IDTraimed = imageItemID.Trim(' ');
            var newsImageSource = Sitecore.Context.Database.GetItem(IDTraimed);

            am.imagePath = "";
            am.Link = newsContentSource.Fields["AktuellLink"].ToString();
            return am;
        }


To get items from MulitList

        public static List<LanguageModel> GetLanguage()
        {
            var datasource = Sitecore.Context.Database.GetItem("/sitecore/content/Navi/Languages");

            List<LanguageModel> smList = new List<LanguageModel>();

            if (datasource != null)
            {
                foreach (Sitecore.Data.Items.Item item in datasource.Children)
                {
                    LanguageModel sm = new LanguageModel();
                    //your code is here
                    sm.LanguageName = item["LanguageName"];
                    sm.Abbreviation = item["Abbreviation"];
                    smList.Add(sm);
                }
            }
            return smList;
        }



        public static List<SammelnModel> GetSelectedItem()
        {
            var dataSourceID = RenderingContext.CurrentOrNull.Rendering.DataSource;
            var datasource = Sitecore.Context.Database.GetItem(dataSourceID);

            List<SammelnModel> smList = new List<SammelnModel>();

            if (datasource != null)
            {
                foreach (Sitecore.Data.Items.Item item in datasource.Children)
                {
                    SammelnModel sm = new SammelnModel();
                   
                    sm.Unit = item["Unit"];
                    sm.Target = item["Target"];
                    sm.Description = item["Description"];

                    sm.LeftSubscript = item["Left-Subscript"];
                    sm.LeftSuperscript = item["Left-Superscript"];
                    sm.RightSubscript = item["Right-Subscript"];
                    sm.RightSuperscript = item["Right-Superscript"];


                    smList.Add(sm);
                }
            }
            return smList;
        }


bit.B form use React JS

var placeholderValue = [{
    name: "enter name",
    emailPlaceholder: "E-Mail-Adresse",
    telePlaceholder: "Telefonnummer"
}]

const Name = (props) => {
    return (
        <div>
            <input className="form-control" placeholder={placeholderValue[0].name} type="text" value={props.username} onChange={props.onChange} />
        </div>
    )
}

const Email = (props) => {
    return (
        <div>
            <input className="form-control" placeholder={placeholderValue[0].emailPlaceholder} type="email" value={props.email} onChange={props.onChange} />
        </div>
    );
}

const Tele = (props) => {
    return (
        <div>
            <input className="form-control" placeholder={placeholderValue[0].telePlaceholder} type="text" value={props.telephone} onChange={props.onChange} />
        </div >
    );
}



const SendDataButton = (props) => {
    return (
        <div>
            <input type="submit" className="form-control1 btn btn-warning btn-lg" name="senden" value="Anfrage senden" onClick={props.onClick} />
        </div>
    );
};

class CustomerForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            username: props.name,
            email: props.email,
            telephone: props.telephone
        }

        this.handleNameChange = this.handleNameChange.bind(this);
        this.handleEmailChange = this.handleEmailChange.bind(this);
        this.handleTeleChange = this.handleTeleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleNameChange(event) {
        this.setState({ username: event.target.value });
    }

    handleEmailChange(event) {
        this.setState({ email: event.target.value });
    }

    handleTeleChange(event) {
        this.setState({ telephone: event.target.value });
    }

    handleSubmit() {
        console.info("Name :" + this.state.username + " E-mail value : " + this.state.email + " | Tele value : " + this.state.telephone)
        console.info("Call axios to send data to backend");

        /*
        axios.get("/bitB/handleUser", {
            email: this.state.email,
            telephone: this.state.telephone
        }).then(reps => {
            alert("aaaa")
        })
        */

        /*window.location.replace('http://sidanmor.com');*/

        return false;
    };

    render() {
        return (
            <form id='letssend'>
                <Name username={this.state.username} onChange={this.handleEmailChange}></Name>
                <br />
                <Email email={this.state.email} onChange={this.handleEmailChange}></Email>
                <br />
                <Tele telephone={this.state.telephone} onChange={this.handleTeleChange}></Tele>
                <br />
                <SendDataButton onClick={this.handleSubmit}></SendDataButton>
            </form>
        )
    }
}

ReactDOM.render(<CustomerForm />, document.getElementById("CustomerFormDisplay"));